Jquery.on "touchstart Mousedown" - Both Events Are Triggered On Touchscreen Device

My problem is I cannot cancel the mousedown event that's fired after touchstart has been triggered. This problem is specific to Android's native browser. Chrome and Safari both suc

Solution 1:

check for presence of touchstart support, set a variable to determine what support you provide:

//touchstart or mousedownvar click = ('ontouchstart'indocument.documentElement)  ? 'touchstart' : 'mousedown';

then use:

$(element).on(click,function(){
    //do stuff
}); 

note that click in this instance is a variable, not a string.

Solution 2:

Use e.preventDefault(); to cancel mousedown event if touchstart was triggered.

Solution 3:

1. Detect which events are supported - no need to support both events simultaneously
2. load $.on() accordingly

3. before adding events remove all events so propagated and/or pre-existing(unwanted) events do not becoming an issue

   $("#mobileMenuBtn").off().on( { "touchstart mousedown": $.proxy( this.onMenuInteraction, this ) } );

References:

how-to-check-browser-for-touchstart-support-using-js-jquery

jquery:off()

Solution 4:

Using a combination of advice above from JDA and Dave Methvin (thank you to both), the solution to my question is below.

In the callback for the "touchstart mousedown" event I switch off specifically "touchstart mousedown". This stops any subsequent touch or mouse event being called.

I've found implementing 'touchend' problematic with Android's native browser - however 'mouseup' event seems to cover both purposes well, i.e, to me it seems to behave in the same way as you would expect 'touchend'.

When 'mouseup' is called I then reapply the "touchstart and mousedown" events to the button.

A simplified version of my solution is below:

$(document).ready( function() {

        $("#mobileMenuBtn").on( { "touchstart mousedown" : onInteraction,
                                  "mouseup" : onInteractionEnd } );

        functiononInteraction(e) {
            $("#mobileMenuBtn").off( "touchstart mousedown" );
        }

        functiononInteractionEnd(e) {
            $("#mobileMenuBtn").on( { "touchstart mousedown" : onInteraction } );
        }

})

Hope this helps others that find the same problem.