Unified and transparent pointer events in jQuery

问题

I have a bootstrap .btn that I want to toggle with the mouse click. The problem is that the response is way too slow on tablets, since the click arrives 300 ms after the touchstart in mobile browsers.

I tried binding the logic in the touchstart event, effectively breaking the app for desktop browsers where there is no touchstart. I then thought of binding the same logic also to click but then I get a repeated event in mobile browsers. I've juggling around, trying to unbind from click the first time I receive a touchstart, and so on, and managed to come up with a design so complicated that there is always some quirk here or there that I cannot solve.

For instance, I can't get a text input to receive focus in the tablet: if I do focus on touchstart then the click event returns the focus to the button. I tried jQuery Mobile's vmousedown, but I couldn't manage to have multi-touch (tapping more than one button at the same time only changed one of them). I don't want to reinvent a lot of wheels, and I'm sure I must be missing something obvious, either on jQuery Mobile, or plain JavaScript.

In concrete, I want an event like vmousedown that works both on desktops and mobiles, only fires once on each, and allows multi-touch.

回答1:

Utilize Modernizr for handling actions based on the device, etc. It provides great cross-browser/platform support without the need to sniff User Agents and the like. Instead, it uses feature detection.

You can just use the Modernizr functions with jQuery's $(document).ready(function()});

$(function(){
    if (Modernizr.touch){
       // bind to touchstart, touchmove, etc and watch `event.streamId`
    } else {
       // bind to normal click, mousemove, etc
    }
});

This code has been taken straight from the Modernizr Documentation

Also, here's another resource for performing touch tests

回答2:

Late to the party, but note that jQueryMobile also has similar touch detection: if ( $.mobile.support.touch ) {... And no, IMHO, you are not missing anything obvious :), cross-platform / cross-device / touch-friendly features are still harder than they should be. For example, today I'm looking at a win8 surface tablet: touch-screen and a mouse. There are cases where i'd like to know which device was used. event.originalEvent.type should differentiate between tap and click, right? wrong :(.

来源：https://stackoverflow.com/questions/16677757/unified-and-transparent-pointer-events-in-jquery