Question

我正试图通过使用<canvas>原型设计一个非常简单的绘图应用来触及HTML5，并触及ontouchstart和ontouchmove等事件。

这在Android模拟器中显示并正常工作，我使用鼠标点击来模拟触摸事件。但是，在我的桌面浏览器（Safari 5.1.1，Windows 7上的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。

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

Answer 3

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

Answer 4

如果您正在使用react，则合成事件是不同的： onClick适用于移动设备和台式机。 onTouchStart仅适用于移动设备。同样，此事件在onClick事件之前进行。也许这是第一个被触发的事件。

就我而言，在移动和桌面环境中，在onClick事件之前需要一个事件，因此我使用了onMouseDown。它与来自React的综合事件一起，适用于移动设备和桌面设备。

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

祝你好运！