2

Take a look at this fiddle: demo

I have attached two events to the div element first one is mousedown and second one is touchstart.

While clicking the element from the touch device both mousedown and touchstart is getting triggered, my expectation is only to trigger the respective events i.e only `touchstart needs to be triggered from the mobile device.

Mohan Ravi
  • 97
  • 1
  • 6
  • Why not just add one handler conditionally? – marekful Jan 31 '18 at 06:04
  • Mobile browsers trigger `mousedown` and `click`, too. You can assign the events to a variable. Use Modernizer.js for this. – Adam Azad Jan 31 '18 at 06:04
  • 1
    Take a look at [this](https://stackoverflow.com/questions/13655919/how-to-bind-both-mousedown-and-touchstart-but-not-respond-to-both-android-jqu) question for workaround if needed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent) for details. – lolbas Jan 31 '18 at 06:05
  • 1
    Touch devices will fire both the events https://w3c.github.io/touch-events/#mouse-events – karthick Jan 31 '18 at 06:05

1 Answers1

5

Please have a look at this fiddle

Normally the event order is : 1) touchstart 2) touchmove 3) touchend 4) mousemove 5) mousedown 6) mouseup 7) click

When any of touch event gets cancelled, then mouse event won't be called. Even if touch move occurs, then mouse event won't occur. Hope this helps :)

jasmin_makasana
  • 472
  • 3
  • 11