Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 547
skyisred Avatar asked Dec 01 '12 03:12

skyisred


People also ask

How do you bind Touchstart and click events but not respond to both?

Just adding return false; at the end of the on("click touchstart") event function can solve this problem.

What is the counterpart to the Touchstart event?

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.

Does touch trigger click event?

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.

Does Mousedown event work on mobile?

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.


2 Answers

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)

like image 139
Radu C Avatar answered Oct 09 '22 19:10

Radu C


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.

like image 34
Joshua Avatar answered Oct 09 '22 19:10

Joshua