如何使用触摸屏在Chrome和MSIE10中通过JavaScript捕获触摸事件

Question

我希望我的Web应用程序可以在Windows设备上使用可拖动对象，并支持触摸屏，但新版Chrome和新版MSIE 10不再支持使用鼠标开发的拖放功能。因此，这个http://jqueryui.com/demos/draggable/可以与鼠标一起使用，但无法与触摸屏一起使用。

如何使可拖动对象在Chrome和MSIE 10中支持触摸屏？

- Ragnar

---

如果你运行 document.addEventListener('touchstart', function (e) { console.log(e) }, false)，你的设备会在轻触时打印任何内容吗？如果是这样，你可以很容易地模拟鼠标事件。 - katspaugh

Chrome支持touchstart和touchend事件，但不支持touchmove事件。这个测试可以在https://developer.mozilla.org/en/DOM/Touch_events找到，但有趣的是，在Firefox 13中似乎已经无法正常工作了...实时演示请参见：https://developer.mozilla.org/samples/domref/touchevents.html。 - Ragnar

在这里尝试隔离测试：http://jsfiddle.net/6QkB7/ - katspaugh

Chrome会触发touch start和touch end事件，但不会触发touch move事件，而Firefox则不会触发任何事件。 - Ragnar

MSIE 10也不会触发任何触摸事件。 - Ragnar

Answer 1

Windows 7上的Chrome 尚不支持触摸事件

但是在Chrome 20+中，您可以导航到实验性的chrome://flags，并打开“启用触摸事件”以获取TouchStart/Move/End事件触发，但似乎会破坏其他行为，如捏缩放和手指滚动。

如果禁用此标志，则由于Chrome中的此错误，TouchStart/End会误触发

- user1162440

Answer 2

如果您正在寻找“滑动”事件，请查看jQuery ++库。请查看我提供的链接以获取演示。

jQuery.event.swipe添加了对滑动手势的支持，提供可委托的swipeleft、swiperight、swipedown、swipeup和swipe事件：

- Arash Milani

---

不行，不起作用。Firefox 只支持拖动，但 Chrome 不支持任何拖动或滑动。 - Ragnar

我刚刚检查了jQuery++的滑动事件处理程序，它在Windows和Ubuntu（chromium 18）中的Firefox 12和chromium 20中都可以工作。 - Arash Milani

最终我用Firefox做到了（大概划了十次），但是在Windows 7上使用Chrome 19和触摸屏时无法实现（整个页面都在移动）。Windows 8上的MSIE 10也不行。我的操作很简单，只需触碰绿色区域，然后向某个方向滑动手指并释放，但它没有反应。 - Ragnar

当我在整个窗口中打开jsfiddle时，所以没有页面拖动，火狐可以注册上下滚动，但是当在Firefox中有可能拖动整个页面时，它会执行该操作而不是向下或向上事件。我已经学会了如何在Firefox中第一次尝试...之前我并没有意识到我实际上不能用手指离开绿色区域。在Chrome中，即使在整个jsfiddle窗口中添加了ev.preventDefault();，它仍然无法工作。我认为Firefox不是将其作为触摸事件触发，而是作为鼠标事件触发。 - Ragnar