jQuery mobile- For every live tap event should there be an equivalent click event?

Question

I have replaced the jQuery live click events to jQuery mobile tap events to increase responsiveness.

I have a feeling this was a bad idea for compatibility reasons.

Is it necessary to have both events, and is there any way to write them both for the same function?

Such as ('click','tap')

Vide

Answer 1

Billy's answer is incredibly complete and actually worked quite well the few times I used it. Additionally however, you may want to look at the vmouse plugin in JQuery Mobile, it is an attempt to abstract mouse events:

 // This plugin is an experiment for abstracting away the touch and mouse
 // events so that developers don't have to worry about which method of input
 // the device their document is loaded on supports.

-- https://github.com/jquery/jquery-mobile/blob/master/js/vmouse.js

I've been playing with it on a project I'm working on, it seems pretty responsive these days. To use, something like:

$('selector').bind('vclick', function () { ...

or

$('selector').bind('vmousedown', function () { ...

Unlive

Billy's answer is great, but this solution is much easier. I have already integrated it. Thank you – Vide

J.T.'s answer is the correct way to do this. If you implemented something else - please rethink it. – Endolymph

Thanks, this really increased responsiveness in my app. – Rodarte

Is the vmouse library still necessary with current builds of JQM? The documentation contains a 'vclick' event under Virtual mouse events. Is this the same thing? – Polynesia

ok, so Included the plugin in my site and its saying that the variable "define" is undefined... hmm, so typical of gitHub stuff. Anyone know how to get this working...? – Rickettsia

ok, wow, so I've check out what you need for all of this to work. I've never seen such a bloated rubbish solution for any JS before. You need to load like 2 bloated JS files just so you can trigger a few events on smartphones? Forget it.. @JT, this is a terrible solution. – Rickettsia

I just want to note that the initial github link is broken and from what it seems, jquery mobile adopted the standard. – Chinoiserie

Answer 2

You can bind multiple events in one call like this:

$('selector').bind('click tap',function(){ ... })

This might be fine in some browsers/mobiles, however, this might make the events fire twice on some devices who trigger both the tap and click.

You can fix this by doing some kind of device/feature detection and adding the appropriate handler only like this...

$('selector').bind( myCustomDetectionFunction() ? 'click' : 'tap' ,function(){ ... })

Additionally, I think touchstart and mousedown are better events to choose. This is because, after a touch, the click event does not fire until a delay has passed, as the system is allowing the chance for a second touch to make it a double click or for it to become a swipe gesture and so on. The touchstart event fires immediately, as does mousedown so should be more responsive.

Cornelia

Would mousedown be as responsive as 'tap' on mobile devices? I would prefer to use one event and avoid making a function for device detection, afterall my mobile layout is only resolution dependent – Vide

I would make a function to detect if it is touch enabled or not, then use touchstart and mousedown. It is not necessary to get into details of which device it is. This is probably simplest approach to ensure you get fastest response cross platform. Detecting touch enabled device is as easy as checking if Touch is defined or not. So like this: (typeof Touch !== "undefined") ? 'touchstart' : 'mousedown' – Cornelia

"Touch" is apparently not defined on all mobile devices. Android 2.3.4's browser, for instance. – Unconscious

Do you know if "mousedown" is defined on Android's 2.3.4 browser? It might degrade fairly gracefully. Other wise is there another more comprehensive method to determine if it is a touch screen device. Also, if there is no touch event, can I assume there is no touchstart to bind? – Cornelia

@dpk That comment about Android 2.3.4 browser is absolutely right. It does not degrade gracefully at all. A better touch detection is necessary! – Cornelia

So good, works perfectly. Don't know why the bloatware above outranks you on this topic question. – Rickettsia

Old thread, but I am cautious about mousedown/touchstart when a click or tap is wanted, because of drag-drop interactions. If you trigger an event on mousedown, when the user was actually drag-selecting some text or other content (or swiping), the app will start an action they didn't want. You'd have to think about the tradeoff between the wait for a second click and the unwanted triggering. Same goes for mouseup/touchend – Takahashi

Answer 3

We've developed a small script to solve that problem. Just include it on a global level and your click events will be fired immediately without any problems with the delayed event.

https://github.com/cargomedia/jquery.touchToClick

Carmelcarmela

Answer 4

It seems jQuery mobile has already an event which does just that:

$(function(){
    $('selector').bind('vclick', function(e){
        alert('test');    
        return false;
    });
});

Tintinnabulation

Answer 5

You can use the vmouse plugin from jQuery. This will resolve the 300ms delay on click events (mobile only) as well as cases where both click and touch events are triggered.

To get just the vmouse plugin, use the jQuery Mobile Download Builder. Include it after jQuery but before any scripts that will depend on this plugin.

The relevant event is vclick, basic use is as follows:

$(".selector").on( "vclick", function( event ) {
    // To execute
});

Gesso

+1 for the vmouse only custom build! Not a fan of jQuery mobile, but this 4kb minified build is lightweight and worked exactly as I needed. – Illegitimacy

Be aware that vclick will also capture right click events, so you may want to detect that to preserve your own sanity during development: .on("vclick",function (e) {alert(e.which)}); – Gesso

So glad I discovered this! Going back to all my PGB apps and making sure I include this... I had thought the iPhone was just slow AF. lol – Beckwith