如何使用触摸屏在 Chrome 和 MSIE10 中的 javascript 中捕获触摸事件答案

【问题标题】：How to catch touch events in javascript in Chrome and MSIE10 using touch screen如何使用触摸屏在 Chrome 和 MSIE10 中的 javascript 中捕获触摸事件
【发布时间】：2012-06-14 20:37:10
【问题描述】：

我希望我的 Web 应用程序能够在带有触摸屏的 Windows 设备上使用可拖动对象工作，但新的 Chrome 和新的 MSIE 10 不再允许我使用为鼠标开发的拖动功能。所以这个http://jqueryui.com/demos/draggable/ 对鼠标有效，但对触摸无效。

如何在 Chrome 和 MSIE 10 中通过触摸使可拖动工作？

【问题讨论】：

如果您运行document.addEventListener('touchstart', function (e) { console.log(e) }, false)，您的设备会在点击时将任何内容打印到控制台吗？如果是这样，您可以很容易地模拟鼠标事件。
chrome 支持 touchstart 和 touchend 但不支持 touchmove 给定这个测试developer.mozilla.org/en/DOM/Touch_events 但有趣的是它实际上似乎不再在 Firefox 13 中工作了......现场演示：developer.mozilla.org/samples/domref/touchevents.html
在这里尝试独立测试：jsfiddle.net/6QkB7
Chrome 触发触摸开始和触摸结束，而不是触摸移动，Firefox 不触发任何东西
MSIE 10 也不会触发任何触摸事件

标签： javascript internet-explorer google-chrome touch draggable

【解决方案1】：

Windows 7 上的 Chrome doesn't yet support touch events

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

禁用此标志后，TouchStart/End 会因this bug in Chrome 而失败

【讨论】：

【解决方案2】：

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

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

【讨论】：

不，不起作用。 Firefox 仅支持拖动，但 Chrome 不支持任何拖动或滑动
我刚刚检查了 jQuery++ swipe 事件处理程序，它在 Windows 和 Ubuntu (chromium 18) 中的 Firefox 12 和 chromium 20 中都可以使用。
我最终能够用 Firefox 做到这一点（就像第十次滑动一样），但我无法在 Windows 7 的 Chrome 19 中用触摸屏做到这一点（它只是不断移动整个页）。 Windows 8 上的 MSIE 10 也不起作用。我所做的只是触摸绿色区域并将手指移动到某个方向然后松开，它没有反应
所以当我在整个窗口中打开 jsfiddle 所以没有页面拖动时，firefox 也可以上下注册，但是当有可能在 Firefox 中拖动整个页面时，它会这样做而不是向下或向上事件。我第一次尝试就学会了在 Firefox 中进行操作……在我没有想到我实际上不能用手指离开绿色区域之前。在 chrome 中，即使在整个 jsfiddle 窗口中它仍然无法工作，即使我添加了 ev.preventDefault();我认为 Firefox 不会将其作为触摸事件触发，而是作为鼠标事件触发。