I am creating a page that should work with touch and muscle interaction on PC, Mac and mobile browsers.
In the event handler methods for touchStart, touchMove, touchEnd, and touchCancel, I call event.preventDefault to prevent mobile browsers from triggering both touch events and mouse events.
This works fine for mouseDown and mouseUp, which do not work when the screen is touched, but for some reason (a couple of 100 ms) after each press of the touchStart button, the Android browser still fires the mouseMove event (on the very first touchStart, this mouseMove is preceded by mouseOver). If I touch fast enough, mouseMove starts after touchEnd (with the same delay relative to touchStart).
I would really like the mouse events not to be generated due to touches, and I would also like to understand in detail what is happening here, so I have the following questions:
- Is there some other touch event that I don't capture that triggers the mouseMove event?
- Why does mouseMove delay a bit with respect to touch?
- Why is the mouse mouse not generated by any other touch events (touchMove, touchEnd)?
- Do any other browsers have quirks that can generate mouse events from touch?
- Is there another cross-platform approach to prevent mouse events from being touched? Maybe some CSS?
source share