為什么在為 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 事件的默認操作。