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 succeeded by the following way.

Easy Peasy...

$(this).on('touchstart click', function(e){
  e.preventDefault();
  //do your stuff here
});

Answer 2

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'); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="click">Click me</h1>
<h1 id="touch">Touch me</h1>

---

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.

Answer 3

I just came up with the idea to memorize if ontouchstart was ever triggered. In this case we are on a device which supports it and want to ignore the onclick event. Since ontouchstart should always be triggered before onclick, I'm using this:

<script> touchAvailable = false; </script>
<button ontouchstart="touchAvailable=true; myFunction();" onclick="if(!touchAvailable) myFunction();">Button</button>

Answer 4

It may be effective to assign to the events 'touchstart mousedown' or 'touchend mouseup' to avoid undesired side-effects of using click.

Answer 5

If you are using jQuery the following worked pretty well for me:

var callback; // Initialize this to the function which needs to be called

$(target).on("click touchstart", selector, (function (func){
    var timer = 0;
    return function(e){
        if ($.now() - timer < 500) return false;
        timer = $.now();
        func(e);
    }
})(callback));

Other solutions are also good but I was binding multiple events in a loop and needed the self calling function to create an appropriate closure. Also, I did not want to disable the binding since I wanted it to be invoke-able on next click/touchstart.

Might help someone in similar situation!

Answer 6

Try to use Virtual Mouse (vmouse) Bindings from jQuery Mobile. It's virtual event especially for your case:

$thing.on('vclick', function(event){ ... });

http://api.jquerymobile.com/vclick/

Browser support list: http://jquerymobile.com/browser-support/1.4/