javascript - How to bind both Mousedown and Touchstart, but not respond to both? Android, JQuery

Question

Working on a website that is also viewable on mobile and need to bind an action on both touchstart and mousedown.

Looks like this

 $("#roll").bind("mousedown touchstart", function(event){

 someAction();

It works fine on Iphone, but on Android it responds twice.

event.stopPropagation();
event.preventDefault();

Adding this code fixed it for Android Chrome, but NOT for Android default browser. Any other tricks that can fix the problem for all android?

Answer 1

element.on('touchstart mousedown', function(e) {
    e.preventDefault();
    someAction();
});

preventDefault cancels the event, as per specs

You get touchstart, but once you cancel it you no longer get mousedown. Contrary to what the accepted answer says, you don't need to call stopPropagation unless it's something you need. The event will propagate normally even when cancelled. The browser will ignore it, but your hooks will still work.

Mozilla agrees with me on this one:

calling preventDefault() on a touchstart or the first touchmove event of a series prevents the corresponding mouse events from firing

EDIT: I just read the question again and you say that you already did this and it didn't fix the Android default browser. Not sure how the accepted answer helped, as it does the same thing basically, just in a more complicated way and with an event propagation bug (touchstart doesn't propagate, but click does)