Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 15 Oct, 2020

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.

<script type="text/javascript">
    let drag = false;
        'mousedown', () => drag = false);
        'mousemove', () => drag = true);
        'mouseup', () => console.log(
            drag ? 'drag' : 'click'));

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.

<!DOCTYPE html>
    <p id="dragtarget" draggable="true" clickable="true">
        Click Me or Drag Me!
    <p id="demo" style="color:red;"></p>
    <script type="text/javascript">
        document.ondrag = function (event) {
                        = "Element is being dragged";
        document.onclick = function (event) {
                    = "Element is being clicked!";


  • When the element is clicked:

  • When the element is dragged:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!