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?
Just adding return false; at the end of the on("click touchstart") event function can solve this problem.
Definition and Usage Tip: Other events related to the touchstart event are: touchend - occurs when the user removes the finger from an element. touchmove - occurs when the user moves the finger across the screen. touchcancel - occurs when the touch is interrupted.
When a visitor clicks on an image the click event will be triggered. However when someone touches the image, that same click event will be triggered, even if a touchstart event is available as well.
This works swimmingly on the desktop, but on mobile (testing in iOS Safari), the mousedown and mouseup events happen at the same time, so effectively nothing happens.
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)
I have been using this function:
//touch click helper
(function ($) {
$.fn.tclick = function (onclick) {
this.bind("touchstart", function (e) {
onclick.call(this, e);
e.stopPropagation();
e.preventDefault();
});
this.bind("click", function (e) {
onclick.call(this, e); //substitute mousedown event for exact same result as touchstart
});
return this;
};
})(jQuery);
UPDATE: Modified answer to support mouse and touch events together.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With