CODEWITHSUNDEEP
javascriptjqueryhtmlmobile
user2190690
user2190690

Reputation: 2034

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 successfully execute my method below in both Android and iOS (onMenuInteraction). My problem seems to be confined to Android's native browser (for me that's preinstalled with Android 4.1.2).

The following is code that I've extracted from my Javascript object.

MenuButtonView.prototype.onSmallScreenSetUp = function() {
    $("#mobileMenuBtn").on( { "touchstart mousedown": $.proxy( this.onMenuInteraction, this ) } );
}

MenuButtonView.prototype.onMenuInteraction = function(e) {
    console.log( this, "onMenuInteraction", e );
    e.stopImmediatePropagation();
    e.stopPropagation();
    e.preventDefault();
}

Please could someone tell me how I can cancel the mousedown event that's fired after your finger touches the screen triggering the touchstart event.

This requirement is based on managing interaction with both desktop and mobile / tablet platforms. Everything works until you're testing with the Android native browser.

Many thanks

D

Upvotes: 3

Views: 8986

Answers (4)

Aleks Dorohovich
Aleks Dorohovich

Reputation: 1652

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

Upvotes: 2

dewd
dewd

Reputation: 4429

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

//touchstart or mousedown
var click = ('ontouchstart' in document.documentElement)  ? 'touchstart' : 'mousedown';

then use:

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

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

Upvotes: 10

user2190690
user2190690

Reputation: 2034

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 } );

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

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

})

Hope this helps others that find the same problem.

Upvotes: 1

JDA
JDA

Reputation: 61

  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()

Upvotes: 1

Related Questions