What is the difference between the click and tap events?

JqueryJquery MobileTouch Event

Jquery Problem Overview


I am developing an app that runs on Android/iOS and desktop computers.

Should I use the click or the tap event?

What are the differences between them?

Will the 'tap' work on desktop? if not, (and I have to use click) am I missing any advantages that the tap has over the click?

Jquery Solutions


Solution 1 - Jquery

You can use .on() to bind a function to multiple events:

$('#element').on('click tap', function() {
    ...
});

Thanks to @bergie3000 for pointing to this

Solution 2 - Jquery

Touch events and mouse events are entirely different beasts. They are not interchangeable.

That said, I'm using jQuery Touch Punch which maps touch events to their mouse event analogs, so a tap becomes the same thing as a click. This makes it possibly to use all the standard jQuery UI goodness without having to do any special touch event programming. It's extremely simple to use, and so far has worked perfectly for me on both iDevices and Android.

Solution 3 - Jquery

Sorry for bringing up old post, but for anyone who's working on jQuery with Phonegap:

"click" event will not be triggered if assigned on "div", "p" etc. elements that were not suppose to be clicked, when "tap" makes it working perfectly on any element! That took me ages to notice.

Conclusion, if you do develop something with jQuery mobile, I would suggest using "tap" instead of "click", as it might cause some issues

Solution 4 - Jquery

I would look into the jQM Documentation for Events, the current docs are here:

for a Mobile device use touch events, if you need mouse events jQM provides Virtual mouse events for this as well.

> Virtual mouse events
We provide a set of "virtual" mouse events that attempt to abstract away mouse and touch events. This > allows the developer to register listeners for the basic mouse events, > such as mousedown, mousemove, mouseup, and click, and the plugin will > take care of registering the correct listeners behind the scenes to > invoke the listener at the fastest possible time for that device. In > touch environments, the plugin retains the order of event firing that > is seen in traditional mouse environments, so for example, vmouseup is > always dispatched before vmousedown, and vmousedown before vclick, > etc. The virtual mouse events also normalize how coordinate > information is extracted from the event, so in touch based > environments, coordinates are available from the pageX, pageY, > screenX, screenY, clientX, and clientY properties, directly on the > event object.

I'm not saying the 'click' event wont work as it still does, for example you can click a button. But there will be different events for Mobile devices verses Desktops

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTigerView Question on Stackoverflow
Solution 1 - JquerytunedView Answer on Stackoverflow
Solution 2 - JqueryghotiView Answer on Stackoverflow
Solution 3 - JqueryRokocoView Answer on Stackoverflow
Solution 4 - JqueryPhill PaffordView Answer on Stackoverflow