Using tap events with Twitter Bootstrap

Question

I am using twitter-bootstrap to develop a web application that can render on multiple devices.

Now I would like to handle the 'tap' event. So my question here is:

1. Can I handle the 'tap' event using jquery 1.7.2 without using jqueryMobile ?
2. If the answer to the above question is a no, then how do I integrate jqueryMobile with twitter-bootstrap. Cause I tried including the jQueryMobile js in my twitter-bootstrap page and when I use it, the page breaks !!

Answer 1

The tap event is a jQuery Mobile event and is not an actual HTML5 event which has a specification. HTML5 specifies touch events, which are supported on Android and iOS, and Twitter Bootstrap already utilizes those event in some of its plugins.

However, going on a common sense notion of what a tap event might be, one could easily trigger them based on a sequence of touch events. Here's a try:

// listen for a touchstart event
$('body').on('touchstart.tap',function (e) {

  // listen for a touchend event
  $(e.target).one('touchend.tap',function() {
    $(e.target).trigger('tap');
  });

  // cancel it in 150ms
  setTimeout(function () {
    $(e.target).off('touchend.tap');
  },150);
});

This will trigger a tap event if a touchend follows a touchstart within 150ms (which you can adjust, of course). You could try using this in lieu of including jQuery mobile if a tap event is all you're after.

Answer 2

I finally hit up on Touchable-jQuery-Plugin which handles touch and their corresponding mouse events.