Using jquery mobile tap instead of click

Question

I'm making a web application that needs to run on both mobile devices as well as non-mobile devices. In my application I have several icons the user can click in order to send a message to a server using websockets.

My code looks something like:

$('.button-container').on('tap', '.sender', function() {
    socket.send('Message');
});

Using 'tap' instead of 'click' is done to provide support for the iPad (and other mobile devices), but as this seems like somewhat of a hack, I have a few concerns.

'tap' seems to work on my test browsers, Safari 7, Chrome 34, and Firefox 26, (all non-mobile) but how is support for other non-mobile browsers?

Also are there any known issues using 'tap' over 'click' for non-mobile browsers?

Answer 1

jQuery Mobile special events i.e. tap, taphold, vclick...etc, are originally touch and mouse events converted into special events.

For example, tap and vclick are either touchstart/touchend or mousedown/mouseup.

On loading jQuery Mobile, it checks if browser supports touch and accordingly events are converted into mouse events or touch events.

You can alternate between events depending on browser's touch support. For non-touch browsers, use click and the ones that support touch, use tap.

On start-up, check $.support.touch, it will return true (tap) or false (click).

var custom_event = $.support.touch ? "tap" : "click";

$(document).on(custom_event, "element", function () {
  /* code */
});

Test the below demo on your desktop and mobile.

Demo