jQuery and jQuery Mobile : tap vs touchstart, touchend, touchmove and click?

Question

Does the jQuery Mobile Tap corresponds to adding an event listener to an element like this:

myElement.addEventListener("touchstart", touchStartHandler, false);

If so, what about the remaining normal events such as touchmove , touchend and so on? I mean what is their equivalent in jQuery Mobile?

Thank you for guiding me.

Answer 1

Internally tap makes use of vclick .

If you don't find an event in this list, they aren't exposed with the same name: https://api.jquerymobile.com/category/events/

This means, for example: if you need to handle touchstart, touchend and touchmove, as normally is, you will probably end up to use the set of virtualized mouse event handler: vmousedown, vmousemove, vmouseup and vclick but you may need to handle the status of the pointer (mouse or finger) by yourself. Do not forget to handle vmousecancel .

Moreover, you should note that there is a delay to wait for some events.

Following is a short extract for you, from the jQuery Mobile documentation with some critical concepts for touch devices (mobile or modern hybrid laptops) to pay attention to:

Webkit based browsers synthesize mousedown, mouseup, and click events roughly 300ms after the touchend event is dispatched.

The jQuery Mobile taphold triggers after 750ms.

After 1500ms, then it is not a touch event. Scroll, TouchMove and TouchEnd events use this. The block list is cleared.

We recommend using click instead of vclick anytime the action being triggered has the possibility of changing the content underneath the point that was touched on screen. This includes page transitions and other behaviors such as collapse/expand that could result in the screen shifting or content being completely replaced.

Have a nice day

Answer 2

I dont know if is exactly the same way they do the handle, but both of they wait for an action and then execute funciton. in jquery mobile you can do

$("p").on("taphold",function(){
$(this).hide();
});

and

$(function(){
$( "div.box" ).bind( "tap", tapHandler );

function tapHandler( event ){
$( event.target ).addClass( "tap" );
}
});

list of events https://api.jquerymobile.com/category/events/