50

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?

Boaz
  • 19,892
  • 8
  • 62
  • 70
Tiger
  • 569
  • 1
  • 5
  • 8

4 Answers4

29

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

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

Thanks to @bergie3000 for pointing to this

Community
  • 1
  • 1
tuned
  • 1,085
  • 10
  • 14
  • 2
    You might run into problems with that solution. See: http://stackoverflow.com/questions/6235794/jquery-mobile-for-every-live-tap-event-should-there-be-an-equivalent-click-even – bergie3000 Apr 22 '14 at 18:40
  • I don't understand why people upvote this. It does not answer the main question `What is the difference between the click and tap events?` – DerZyklop Aug 02 '23 at 11:00
18

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.

ghoti
  • 45,319
  • 8
  • 65
  • 104
  • 10
    Can you elaborate on how they are different? – xn. Jul 01 '13 at 22:36
  • 2
    @xn.: First off, mouseover, mousemove and mouseout are different events from touchstart, touchmove and touchend. Second, while they achieve many of the same results, the capabilities are slightly different - there can be no mouse equivalent to multitouch, and "click and drag" can't be done with a finger. You can use the tool I mentioned to map touch events to functionally (though not physically) equivalent mouse events. – ghoti Oct 28 '14 at 20:00
10

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

Rokoco
  • 101
  • 1
  • 4
  • 9
    you can use `cursor: pointer` to get the click event working on `div`, `p` etc. – Simon_Weaver Sep 16 '14 at 15:22
  • 2
    @Simon_Weaver thank you! this randomly fixed a problem where i had to build blur listeners with js for mobile - now, it's just `body.mobile{pointer:cursor}` css. awesome! – luchaos Sep 25 '14 at 23:59
2

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

Phill Pafford
  • 83,471
  • 91
  • 263
  • 383