How to bind 'touchstart' and 'click' events but not respond to both?

Question

I\'m working on a mobile web site that has to work on a variety of devices. The one\'s giving me a headache at the moment are BlackBerry.

We need to support both key

Answer 1

I believe the best practice is now to use:

$('#object').on('touchend mouseup', function () { });

touchend

The touchend event is fired when a touch point is removed from the touch surface.

The touchend event will not trigger any mouse events.

---

mouseup

The mouseup event is sent to an element when the mouse pointer is over the element, and the mouse button is released. Any HTML element can receive this event.

The mouseup event will not trigger any touch events.

EXAMPLE

$('#click').on('mouseup', function () { alert('Event detected'); });
$('#touch').on('touchend', function () { alert('Event detected'); });

Click me
Touch me

---

EDIT (2017)

As of 2017, browsers starting with Chrome are making steps towards making the click event .on("click") more compatible for both mouse and touch by eliminating the delay generated by tap events on click requests.

This leads to the conclusion that reverting back to using just the click event would be the simplest solution moving forward.

I have not yet done any cross browser testing to see if this is practical.