How to distinguish mouse click and drag

Question

I use jQuery click to handle the mouse click event on Raphael graph  meanwhile  I need to handle mouse drag event  mouse drag consists of mousedown  mouseupand mousemove in Raphael    It is difficult to distinguish click and drag because click also contain mousedown  amp  mouseup  How can I distinguish mouse  click   amp  mouse  drag  then in Javascript

User · Answer

This should work well  Similar to the accepted answer  though using jQuery   but the isDragging flag is only reset if the new mouse position differs from that on mousedown event  Unlike the accepted answer  that works on recent versions of Chrome  where mousemove is fired regardless of whether mouse was moved or not   var isDragging   false  var startingPos           selector        mousedown function  evt            isDragging   false          startingPos    evt pageX  evt pageY               mousemove function  evt            if    evt pageX     startingPos 0   amp  amp  evt pageY     startingPos 1                  isDragging   true                        mouseup function              if  isDragging                console log  Drag              else               console log  Click                      isDragging   false          startingPos                 You may also adjust the coordinate check in mousemove if you want to add a little bit of tolerance  i e  treat tiny movements as clicks  not drags

User · Answer

If just to filter out the drag case  do it like this   var moved   false    selector     mousedown function    moved   false       mousemove function    moved   true       mouseup function event        if   moved               clicked without moving mouse

User · Answer

In case you are already using jQuery   var  body      body     body on  mousedown   function  evt       body on  mouseup mousemove   function handler evt        if  evt type      mouseup              click       else            drag            body off  mouseup mousemove   handler

User · Answer

For a public action on an OSM map  position a marker on click  the question was  1  how to determine the duration of mouse down- up  you can t imagine creating a new marker for each click  and 2  did the mouse move during down- up  i e user is dragging the map     const map   document getElementById  map     map addEventListener  mousedown   position    map addEventListener  mouseup   calculate    let posX  posY  endX  endY  t1  t2  action   function position e       posX   e clientX    posY   e clientY    t1   Date now        function calculate e       endX   e clientX    endY   e clientY    t2    Date now  -t1  1000    action    inactive      if  t2  gt  0 5  amp  amp  t2  lt  1 5       Fixing duration of mouse down- gt up        if  Math abs  posX-endX    lt  5  amp  amp  Math abs  posY-endY    lt  5        5px error on mouse pos while clicking          action    active               -------- gt  Do something               console log  Down     posX          posY   nUp     endX          endY    nAction      action

User · Answer

As mrjrdnthms points out in his comment on the accepted answer  this no longer works on Chrome  it always fires the mousemove   I ve adapted Gustavo s answer  since I m using jQuery  to address the Chrome behavior   var currentPos          document  on  mousedown   function  evt        currentPos    evt pageX  evt pageY       document  on  mousemove   function handler evt         currentPos  evt pageX  evt pageY         document  off  mousemove   handler               document  on  mouseup   function handler evt         if  evt pageX  evt pageY  equals currentPos         console log  Click       else       console log  Drag          document  off  mouseup   handler                 The Array prototype equals function comes from this answer

User · Answer

You could do this   x000D   x000D  var div   document getElementById  div    div addEventListener  mousedown   function       window addEventListener  mousemove   drag     window addEventListener  mouseup   lift     var didDrag   false    function drag           when the person drags their mouse while holding the mouse button down     didDrag   true      div innerHTML    drag        function lift           when the person lifts mouse     if   didDrag            if the person didn t drag       div innerHTML    click         else div innerHTML    drag         delete event listeners so that it doesn t keep saying drag     window removeEventListener  mousemove   drag      window removeEventListener  mouseup   this         x000D  body     outline  none    box-sizing  border-box    margin  0    padding  0    font-family  Arial  Helvetica  sans-serif    overflow  hidden     div        calculating -5px for each side of border in case border-box doesn t work      width  calc 100vw - 10px     height  calc 100vh - 10px     border  5px solid orange    background-color  yellow    font-weight  700    display  grid    place-items  center    user-select  none    cursor  pointer    padding  0    margin  0    x000D   lt html gt     lt body gt       lt div id  div  gt Click me or drag me  lt  div gt     lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

Based on this answer  I did this in my React component  export default React memo      gt        const containerRef   React useRef null        React useEffect      gt            document addEventListener  mousedown   handleMouseMove            return      gt  document removeEventListener  mousedown   handleMouseMove                    const handleMouseMove   React useCallback      gt            const drag    e    gt                console log  mouse is moving                        const lift    e    gt                console log  mouse move ended                window removeEventListener  mousemove   drag               window removeEventListener  mouseup   this                       window addEventListener  mousemove   drag           window addEventListener  mouseup   lift                    return            lt div style    width   100vw   height   100vh     ref  containerRef    gt

User · Answer

Using jQuery with a 5 pixel x y theshold to detect the drag   var dragging   false     body   on  mousedown   function e      var x   e screenX    var y   e screenY    dragging   false       body   on  mousemove   function e        if  Math abs x - e screenX   gt  5    Math abs y - e screenY   gt  5          dragging   true                     body   on  mouseup   function e         body   off  mousemove      console log dragging    drag     click

User · Answer

Pure JS with DeltaX and DeltaY  This DeltaX and DeltaY as suggested by a comment in the accepted answer to avoid the frustrating experience when trying to click and get a drag operation instead due to a one tick mousemove       deltaX   deltaY   2   px     var element   document getElementById  divID        element addEventListener  mousedown   function e           if  typeof InitPageX     undefined   amp  amp  typeof InitPageY     undefined                 InitPageX   e pageX              InitPageY   e pageY                    false       element addEventListener  mousemove   function e           if  typeof InitPageX      undefined   amp  amp  typeof InitPageY      undefined                 diffX   e pageX - InitPageX              diffY   e pageY - InitPageY              if       diffX  gt  deltaX      diffX  lt  -deltaX                                               diffY  gt  deltaY      diffY  lt  -deltaY                                             console log  dragging     dragging event or function goes here                            else                   console log  click     click event or moving back in delta goes here                                 false       element addEventListener  mouseup   function            delete InitPageX          delete InitPageY         false       element addEventListener  click   function            console log  click           false

User · Answer

from  Przemek  s answer   x000D   x000D  function listenClickOnly element  callback  threshold 10      let drag   0    element addEventListener  mousedown        gt  drag   0     element addEventListener  mousemove        gt  drag       element addEventListener  mouseup   e   gt        if  drag lt threshold  callback e            listenClickOnly    document         gt  console log  click      10    x000D   x000D   x000D

User · Answer

If you feel like using Rxjs    x000D   x000D  var element   document  x000D   x000D  Rx Observable x000D     merge  x000D      Rx Observable fromEvent element   mousedown   mapTo 0   x000D      Rx Observable fromEvent element   mousemove   mapTo 1  x000D      x000D     sample Rx Observable fromEvent element   mouseup    x000D     subscribe flag   gt    x000D        console clear    x000D        console log flag    drag     click    x000D        x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   unpkg com  reactivex rxjs 5 4 1 dist global Rx js  gt  lt  script gt  x000D   x000D   x000D    This is a direct clone of what  wong2 did in his answer  but converted to RxJs   Also interesting use of sample  The sample operator will take the latest value from the source  the merge of mousedown and mousemove  and emit it when the inner observable  mouseup  emits

User · Answer

It s really this simple var dragged   false window addEventListener  mousedown   function      dragged   false    window addEventListener  mousemove   function      dragged   true    window addEventListener  mouseup   function             if  dragged    true    return           console log  quot CLICK    quot       You honestly do not want to add a threshold allowing a small movement  The above is the correct  normal  feel of clicking on all desktop interfaces  Just try it  You can easily add an event if you like

User · Answer

I think the difference is that there is a mousemove between mousedown and mouseup in a drag  but not in a click   You can do something like this   const element   document createElement  div   element innerHTML    test  document body appendChild element  let moved let downListener        gt        moved   false   element addEventListener  mousedown   downListener  let moveListener        gt        moved   true   element addEventListener  mousemove   moveListener  let upListener        gt        if  moved            console log  moved         else           console log  not moved           element addEventListener  mouseup   upListener      release memory element removeEventListener  mousedown   downListener  element removeEventListener  mousemove   moveListener  element removeEventListener  mouseup   upListener

User · Answer

Another solution for class based vanilla JS using a distance threshold private initDetectDrag element        let clickOrigin     x  0  y  0        const dragDistanceThreshhold   20       element addEventListener  mousedown    event    gt            this isDragged   false         clickOrigin     x  event clientX  y  event clientY                element addEventListener  mousemove    event    gt            if  Math sqrt Math pow clickOrigin y - event clientY  2    Math pow clickOrigin x - event clientX  2    gt  dragDistanceThreshhold                this isDragged   true                      Add inside the class  SOMESLIDER ELEMENT can also be document to be global   private isDragged  boolean  constructor         this initDetectDrag SOMESLIDER ELEMENT       this doSomeSlideStuff SOMESLIDER ELEMENT       element addEventListener  click    event    gt            if   this sliderIsDragged                console log  was clicked              else               console log  was dragged  ignore click or handle this                     false

User · Answer

Cleaner ES2015   x000D   x000D  let drag   false  x000D   x000D  document addEventListener  mousedown        gt  drag   false   x000D  document addEventListener  mousemove        gt  drag   true   x000D  document addEventListener  mouseup        gt  console log drag    drag     click     x000D   x000D   x000D    Didn t experience any bugs  as others comment

User · Answer

If you want check the click or drag behavior of a specific element you can do this without having to listen to the body    x000D   x000D    document  ready function    x000D    let click  x000D     x000D        owl-carousel   owlCarousel   x000D      items  1 x000D        x000D     x000D       prevent clicks when sliding x000D        btn   x000D       on  mousemove   function    x000D        click   false  x000D         x000D       on  mousedown   function    x000D        click   true  x000D          x000D       x000D       change mouseup listener to   content  to listen to a wider area   mouse drag release could happen out of the   btn  which we have not listent to   Note that the click will trigger if   btn  mousedown event is triggered above x000D        btn   on  mouseup   function    x000D      if click   x000D            result   text  clicked    x000D        else   x000D            result   text  dragged    x000D        x000D        x000D      x000D   content  x000D    position  relative  x000D    width  500px  x000D    height  400px  x000D    background   f2f2f2  x000D    x000D   slider   result  x000D    position  relative  x000D    width  400px  x000D    x000D   slider  x000D    height  200px  x000D    margin  0 auto  x000D    top  30px  x000D    x000D   btn  x000D    display  flex  x000D    align-items  center  x000D    justify-content  center  x000D    text-align  center  x000D    height  100px  x000D    background   c66  x000D    x000D   result  x000D    height  30px  x000D    top  10px  x000D    text-align  center  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs OwlCarousel2 2 3 4 owl carousel min js  gt  lt  script gt  x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs OwlCarousel2 2 3 4 assets owl carousel min css    gt  x000D   lt div class  content  gt  x000D     lt div class  slider  gt  x000D       lt div class  owl-carousel owl-theme  gt  x000D         lt div class  item  gt  x000D           lt a href     class  btn  draggable  true  gt click me without moving the mouse lt  a gt  x000D         lt  div gt  x000D         lt div class  item  gt  x000D           lt a href     class  btn  draggable  true  gt click me without moving the mouse lt  a gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt div class  result  gt  lt  div gt  x000D     lt  div gt  x000D     x000D   lt  div gt  x000D   x000D   x000D

User · Answer

All these solutions either break on tiny mouse movements  or are overcomplicated   Here is a simple adaptable solution using two event listeners  Delta is the distance in pixels that you must move horizontally or vertically between the up and down events for the code to classify it as a drag rather than a click  This is because sometimes you will move the mouse or your finger a few pixels before lifting it   const delta   6  let startX  let startY   element addEventListener  mousedown   function  event      startX   event pageX    startY   event pageY       element addEventListener  mouseup   function  event      const diffX   Math abs event pageX - startX     const diffY   Math abs event pageY - startY      if  diffX  lt  delta  amp  amp  diffY  lt  delta           Click

[javascript] How to distinguish mouse "click" and "drag"

Examples related to javascript

Examples related to dom-events