jQuery中统一透明的指针事件答案

【问题标题】：Unified and transparent pointer events in jQueryjQuery中统一透明的指针事件
【发布时间】：2013-05-16 15:25:19
【问题描述】：

我有一个引导程序.btn，我想通过单击鼠标进行切换。问题是平板电脑上的响应太慢了，因为在移动浏览器中click 在touchstart 之后 300 毫秒到达。

我尝试在touchstart 事件中绑定逻辑，有效地破坏了没有touchstart 的桌面浏览器的应用程序。然后我想将相同的逻辑也绑定到click，但后来我在移动浏览器中得到了一个重复的事件。我一直在玩杂耍，在我第一次收到touchstart 时试图解除与click 的绑定，等等，并设法想出了一个如此复杂的设计，以至于这里或那里总是有一些我无法解决的怪癖.

例如，我无法在平板电脑中获得文本输入来接收焦点：如果我确实关注touchstart，那么click 事件会将焦点返回给按钮。我尝试了 jQuery Mobile 的vmousedown，但我无法实现多点触控（同时点击多个按钮只会更改其中一个）。我不想重新发明很多轮子，而且我确信我一定遗漏了一些明显的东西，无论是在 jQuery Mobile 上，还是在纯 JavaScript 上。

具体来说，我想要一个像vmousedown 这样的事件，它可以在台式机和移动设备上运行，每个只触发一次，并允许多点触控。

【问题讨论】：

使用 Modernizr 库。 if(Modernizr.touch){ //logic here }else{ //no touch event }
兼容 jQuery 吗？
是的，Modernizr 与 jQuery 兼容。
@Ohgodwhy 请写一个更详细的答案，以便我接受？我想知道如何处理手机和台式机的情况。感谢您的帮助！！！

标签： javascript jquery twitter-bootstrap multi-touch

【解决方案1】：

利用Modernizr 处理基于设备等的操作。它提供了出色的跨浏览器/平台支持，而无需嗅探用户代理等。相反，它使用特征检测。

您可以将 Modernizr 函数与 jQuery 的 $(document).ready(function()}); 一起使用

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

此代码直接取自Modernizr Documentation

Also, here's another resource 执行touch tests

【讨论】：

太棒了！！，我将把它全部封装到一个$.fn.pointerDown 函数中，让我可以透明地绑定到mousedown 或touchstart。

【解决方案2】：

迟到了，但请注意 jQueryMobile 也有类似的触摸检测：如果（$.mobile.support.touch）{... 不，恕我直言，你没有错过任何明显的东西:)，跨平台/跨设备/触摸友好的功能仍然比它们应该的更难。例如，今天我在看一个win8 Surface平板电脑：触摸屏和鼠标。在某些情况下，我想知道使用了哪个设备。 event.originalEvent.type 应该区分点击和点击，对吧？错了:(。

【讨论】：