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

Question

我正在尝试通过使用

<canvas>

和触摸事件（如

ontouchstart

和

ontouchmove

）制作一个极其简单的绘图应用程序原型来加快 HTML5 的速度。

这在我使用鼠标点击来模拟触摸事件的 Android 模拟器中显示和工作正常。但是，在我的桌面浏览器（Windows 上的 Safari 5.1.1、Firefox 7）中运行时它根本不起作用。

我认为鼠标点击事件会被解释为触摸事件，就像它们在模拟器中运行时一样。

我现在想知道桌面浏览器是否可能根本不支持触摸事件。

Answer 1

其实恰恰相反。移动浏览器将触摸事件转换为鼠标事件以获得传统支持。如果它需要同时在移动设备和桌面设备上运行，并且您真的不需要触摸事件，则可以只使用鼠标事件。否则，绑定触摸和鼠标事件并让触摸事件取消鼠标事件。这样在移动设备上触摸触发而鼠标不触发。在桌面上，触摸不会触发，鼠标会触发。

对于pilau，这里有一个简单的取消移动设备点击事件的例子。请注意，这个问题更多的是关于绘图的，这会涉及到点击拖动，这需要更多的代码来检测，但基本思想是一样的，绑定你需要处理的事件。然后

e.preventdefault()

将停止移动浏览器模拟点击类型事件。

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

   // Do your onclick action now

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

Answer 2

Firefox 6 及以上版本支持触摸事件。请参阅兼容性表here.

编辑：您是使用触摸屏还是鼠标进行测试？鼠标事件不会自动转换为触摸事件。有关如何使用鼠标模拟触摸事件，请参阅这篇文章。

Answer 3

ontouchstart

将添加到 iPhone 版本的 webkit for javascript。你可以测试它，但只能在模拟器上。

Answer 4

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

onClick

适用于移动设备和桌面设备。

onTouchStart

仅适用于移动设备。此外，此事件发生在 onClick 事件之前。也许这是第一个被触发的事件。

就我而言，我需要在移动和桌面环境中的

onClick

事件之前发生一个事件，所以我使用了 onMouseDown。它与来自 React 的合成事件一起适用于移动设备和桌面设备。

请记住，对于开发建议，在移动设备或桌面上进行测试的最简单方法是使用开发人员工具，单击切换设备工具栏或在检查器中单击 cmd + shift + M。

祝你好运！

Answer 5

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

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