桌面浏览器支持触摸事件吗？

Question

我正在尝试通过使用<canvas>和类似ontouchstart和ontouchmove的触摸事件来快速了解HTML5，并制作一个极其简单的绘图应用程序原型。在使用鼠标点击模拟触摸事件的Android模拟器中，这个应用程序可以正常显示和工作。然而，在我的桌面浏览器（Windows上的Safari 5.1.1、Firefox 7）中运行时完全无法工作。我认为鼠标点击事件会被解释为触摸事件，就像在模拟器内部运行时一样。现在我想知道，也许桌面浏览器根本不支持触摸事件。

- Justin

Answer 1

实际上恰恰相反。移动浏览器为了支持传统的方式将触摸事件转换为鼠标事件。如果需要在移动设备和桌面上都能正常工作，而且您不需要触摸事件，那么可以使用鼠标事件。如果这样仍然不能满足要求，请同时绑定触摸和鼠标事件，并使触摸事件取消鼠标事件。这样，在移动设备上触摸触发而鼠标不会触发，在桌面上则相反。

对于pilau，以下是在移动设备上取消单击事件的简单示例。请注意，该问题更多涉及绘图，需要进行拖动点击检测的代码会复杂一些，但基本思路相同，绑定需要处理的事件。然后e.preventdefault()将停止移动浏览器模拟点击事件的行为。

$('#element').on('touchend click', function(e){

   // Do your onclick action now

   // cancel the onclick firing
   e.preventDefault();
});

- Lee

---

如果您能发布一个代码片段来展示如何做到这一点，我会向您发送我甜蜜的爱！ :) - pilau

@pilau 如果你正在使用jQuery，只需在事件处理函数中使用event.preventDefault()，它将阻止移动浏览器模拟鼠标点击事件，我会在我的主帖子中为你提供一个示例。 - Lee

哦，原来如此简单！非常感谢。 - pilau

Answer 2

火狐浏览器6及以上版本支持触摸事件。请参阅兼容性表此处。

触摸事件MDN文章请查看这里。

编辑：您是使用触摸屏还是鼠标进行测试？鼠标事件不会自动转换为触摸事件。如需了解如何使用鼠标模拟触摸事件，请参见此帖。

- pradeek

---

MDN的文章链接到一个示例，但在当前版本的FF或Safari中对我不起作用。https://developer.mozilla.org/samples/domref/touchevents.html - Justin

我很确定只有Firefox移动版6+支持触摸事件，而不是桌面版Firefox（除非您使用moz-touch事件）。 - Matt Wonlaw

Answer 3

如果你正在使用React，那么合成事件是不同的：

• onClick适用于移动设备和桌面设备。
• onTouchStart仅适用于移动设备。此外，该事件会在onClick事件之前触发，可能是第一个被触发的事件。

在我的情况下，我需要在移动设备和桌面环境中在onClick事件之前触发一个事件，因此我使用了onMouseDown。使用React的合成事件，它可以同时适用于移动设备和桌面设备。

请记住，为了开发目的，在移动设备或桌面设备上进行测试的最简单方法是使用开发者工具，在检查器中点击“切换设备工具栏”或按下cmd + shift + M。

祝你好运！

- ValRob

Answer 4

ontouchstart将成为iPhone版WebKit的JavaScript附加功能。您可以进行测试，但只能在模拟器上进行。

- Joseph Le Brech

Answer 5

在移动设备上使用 onTouchStart/onTouchEnd。在桌面或较大屏幕上使用 onMouseDown/onMouseUp。

<button onTouchStart={} onTouchEnd={} onMouseDown={} onMouseUp={}>Click Me</button>

- Clark