javascript - 为什么在为 touchstart 事件调用 preventDefault() 时会抑制 onclick 事件？

Question

我尝试为我的 Ipad 设备实现一些 javascript 函数。我想在我的 Canvas div 上使用一些滑动操作和点击操作。

我实现了水平和垂直滑动功能。我必须在 touchstart 事件上使用 preventDefault 来防止滑动时整页滚动。它运行良好，但在此之后我注意到它禁用了此 div 上的每个点击事件。当 preventDefault 被移除时，点击事件再次起作用。

有什么办法可以解决这个问题吗？

dojo.connect(this.node, "ontouchstart", this, "touchstart"); 

...   

touchstart: function(e){
    this.touch = dojo.clone(e.changedTouches[0]);
    e.preventDefault();   
}

this.node = document.getElementById('aa');

<div id="aa" style="width: 600px; height: 400px;">
  <div onclick="alert('asd');" style="width: 100px; height: 100px; background-color: #ff0000; margin: auto;">

  </div>
</div>

Answer 1

我知道 Prusse 已经正确回答了这个问题，但它缺乏我在答案中寻找的信心。 touchstart 中preventDefault() 抑制click 事件的原因是因为任何连接的事件和touchstart 之后的事件都将被抑制。 解决方案是改为将 preventDefault() 添加到 touchmove 事件。

这在 Mozilla documentation 中有更详细的解释。在处理点击下:

Since calling preventDefault() on a touchstart or the first touchmove event of a series prevents the corresponding mouse events from firing, it's common to call preventDefault() on touchmove rather than touchstart. That way, mouse events can still fire and things like links will continue to work.