How to differentiate mouse “click” and “drag” event using JavaScript ?

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 the drag and click events. JavaScript has a drag and clicks 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.

Approach 1: 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 the 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” event remains 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 ‘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 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‘ which means there has been no “mouse move” event which also implies that a “click” event had occurred. Hence the click output is displayed to the console.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output: On click and drag events , the output is displayed in the console as shown below.

Approach 2: 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 in 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 user activity and then the actions corresponding to the events are executed.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<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>

chevron_right


Output:

  • When the element is clicked:

  • When the element is dragged:

full-stack-img




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.