How to differentiate mouse “click” and “drag” event using JavaScript ?
Last Updated :
28 Dec, 2023
Working with web elements a user may drag or click an element as per requirement. It is important to distinguish between drag and click events. JavaScript is a high-level, dynamically typed programming language that can be used to distinguish between drag and click events. JavaScript has drag-and-clicking events that help to differentiate between the two. This article demonstrates two methods of differentiating between click and drag events. In the first method, we will display the output on the console whereas, in the second approach, we will display the output on the webpage itself. The user can choose either method at his convenience.
These are the following approaches:
We have a web page where any kind of click or drag event is logged in the console. The basic difference between a click and a drag event is mouse movement. The mouse event that differentiates a click and drag event is the "mouse move" event. In a "click" event, there is no "mouse move" event. However, the "mouse down" and "mouse up" events remain the same for both click and drag.
The JavaScript code below shows that a variable named drag is initiated with a 'false' boolean value. For the "mouse down" event, 'the drag' variable remains false. But as soon as a "mouse move" event is triggered the drag variable is set to 'true'. On the "mouse up" event, the value of the drag variable is checked. If the value is true, a "drag" event has occurred and the output is displayed in the console. If the value is 'false' it means there has been no "mouse move" event which also implies that a "click" event had occurred. Hence the click output is displayed in the console.
Example: This example shows the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
let drag = false;
document.addEventListener(
'mousedown', () => drag = false);
document.addEventListener(
'mousemove', () => drag = true);
document.addEventListener(
'mouseup', () => console.log(
drag ? 'drag' : 'click'));
</script>
</body>
</html>
Output: On click and drag events, the output is displayed in the console as shown below.

The second approach is element specific and does not work for all the other elements in the web page. We choose an element to log the "click" or "drag" events. In the example below, a paragraph is chosen as the required element and we assign 'draggable' and 'clickable' attributes as true which means the element can be dragged as well as clicked.
The JavaScript events ondrag and onclick help us achieve the desired result. When the element is clicked, a click message is displayed just below the element on the web page itself. When the element is dragged, a drag message is displayed just below the element in the web page itself. The click and drag events are fired as per the user activity and then the actions corresponding to the events are executed.
Example: This example shows the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="dragtarget" draggable="true" clickable="true">
Click Me or Drag Me!
</p>
<p id="demo" style="color:red;"></p>
<script type="text/javascript">
document.ondrag = function (event) {
document.getElementById("demo").innerHTML
= "Element is being dragged";
};
document.onclick = function (event) {
document.getElementById("demo").innerHTML
= "Element is being clicked!";
};
</script>
</body>
</html>
Output:
Similar Reads
How to Call a JavaScript Function from an onmouseout Event ? The onmouseout event in JavaScript triggers when the mouse pointer leaves an element. This event is commonly used in web development to execute certain functions when a user moves the mouse away from a specific area on the webpage. Below are the approaches to call a JavaScript function from an onmou
3 min read
How to distinguish left and right mouse click using jQuery? jQuery can be used to distinguish which mouse button is being clicked. This can be used in various web applications where knowing a certain mouse button can be used to trigger certain functionality. Using the mousedown() method: The mousedown() method in jQuery can be used to bind an event handler t
2 min read
Difference between mouseover, mouseenter and mousemove events in JavaScript Events in JavaScript provide a dynamic interface to the webpage. There are wide variety of events such as user clicking, moving the mouse over an element, etc. Events that occur when the mouse interacts with the HTML document falls under the category of MouseEvent property. mouseover: The onmouseove
2 min read
How to Configure Mouse Wheel Speed Across Browsers using JavaScript ? The mouse wheel's scrolling speed varies with the choice of the web browser, even the DOM events and methods to change the scrolling speed are not the same. To provide zoom and animation on a web page, it is generally required to configure mouse speed. The speed of the wheel can be controlled by nor
3 min read
Difference Between the Click & Mousedown Events The mousedown and the click event in JavaScript occur when the mouse button is pressed. But the click event handles the button press as well as the button release while mousedown only handles the button click. Some of the important differences between them are listed below. Click EventThe click even
3 min read
How to Determine which Element the Mouse Pointer Move Over using JavaScript? Given an HTML document and the task is to get the element where the mouse pointer moves over. Below are the approaches to Determining which Element the Mouse Pointer moves over using JavaScript: Table of ContentUsing clientX and clientY propertiesUsing onmouseover propertyApproach 1: Using clientX a
2 min read
Javascript Drag and Drop event - error catching Javascript Drag and Drop event allows users to drag and drop elements within a web page. The event is initiated when the user clicks on an element and drags it to a new location. There are several other types of errors that can occur when working with the drag-and-drop event in Javascript. Here are
4 min read
JavaScript Coordinates of Mouse In JavaScript, we have methods that help us to capture the location of the mouse on the screen. The top left corner of the screen is (0, 0) i,e, X, and Y coordinates are (0, 0). This means that vertical zero is the topmost point and horizontal zero is the leftmost point. In this article, we are goin
2 min read
How to get the coordinates of a mouse click on a canvas element ? The coordinates of the mouse whenever a click takes place can be found by detecting the click event with an event listener and finding the event's x and y positions. In this article we are going to learn How to get the coordinates of a mouse click on a canvas element. ApproachCreate a JavaScript fun
2 min read
How to Drag and Drop Images using HTML5 ? In this article, we will see how to create a drag and drop functionality using HTML5. Approach: The following approach will be implemented to Drag and Drop Images using HTML5. We have given a rectangle area and an image, the task is to drag the image and drop it into the rectangle.We have to enable
2 min read