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

Question

我尝试为我的 Ipad 设备实现一些 javascript 功能。 我想在我的 canvas div 上使用一些滑动操作和单击操作。

我实现了水平和垂直滑动 function。 滑动时，我必须在 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() 抑制的点击事件的原因是任何连接和跟随 touchstart 的事件都将被抑制。 解决方案是将 preventDefault() 添加到 touchmove 事件中。

这在处理点击下的Mozilla 文档中有更详细的解释：

由于在 touchstart 或一系列的第一个 touchmove 事件上调用 preventDefault() 会阻止相应的鼠标事件触发，因此通常在 touchmove 而不是 touchstart 上调用 preventDefault()。 这样，鼠标事件仍然可以触发，并且链接之类的东西将继续工作。

Answer 2

您可以尝试阻止 touchmove 事件的默认操作。