JavaScript：在 iPad 但不是 iPhone 上工作的觸摸事件

Question

為 iPad 和 iPhone 編寫 JS 觸摸事件有什么區別？ 我已經閱讀了大量的文檔，據我所知，兩者的工作方式應該相同。

我有一個拖放游戲，基本上你從龍的下方抓起一枚硬幣並將其拖到你的金庫中。 拖動適用於 iPad，但不適用於 iPhone。 我試圖找出原因。

游戲，供參考： https://codeeverydamnday.com/projects/dragondrop/dragondrop.html

JS，刪節為這個問題的相關代碼（為了清楚起見，注釋）：

var dragndrop = (function() {
  var myX = "";
  var myY = "";
    // The coin's starting X and Y coordinate positions
  var coin = "";
    // The coin you start touching / dragging

  function touchStart(e) {
    e.preventDefault();
      // Prevents default behavior of scrolling when you touch/drag on mobile
    var coin = e.target;
    var touch = e.touches[0];
    var moveOffsetX = coin.offsetLeft - touch.pageX;
    var moveOffsetY = coin.offsetTop - touch.pageY;
      // Defines offset between left edge of coin and where you place your finger on it
    coin.addEventListener('touchmove', function() {
      var positionX = touch.pageX+moveOffsetX;
      var positionY = touch.pageY+moveOffsetY;
        // Defines the X-Y coordinates of wherever you stop dragging
      coin.style.left = positionX + 'px';
      coin.style.top = positionY + 'px';
        // Updates the coin's X-Y coordinates with the new positions
    }, false)
  }
  document.querySelector('body').addEventListener('touchstart', touchStart, false);
})();

如果有幫助，我每次在 Chrome 開發工具模擬器中單擊/點擊 iPad 屏幕時都會收到此控制台日志錯誤：

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

這個錯誤似乎並沒有阻止拖動在 iPad 上工作，但我不確定它是否與拖動在移動設備上不起作用有關？ 我嘗試根據我看到的其他 Stack Overflow 問題添加一些東西來修復錯誤（例如，在我的 CSS 中添加touch-action: none; ，但錯誤仍然存在）。

有人看到我的代碼有什么問題嗎？ 我很想在手機上玩這個游戲，因為大多數人都會這樣玩！

Answer 1

對於touch-start和touch-move事件，passive 選項的默認值設置為true ，它為 true 意味着您的 function 不會調用preventDefault來禁用滾動。

只需將passive值設置為false即可解決您的問題。

 var dragndrop = (function() { var myX; var myY; var coin; function touchStart(e) { e.preventDefault(); coin = e.target; const touch = e.touches[0]; const moveOffsetX = whichArt.offsetLeft - touch.pageX; const moveOffsetY = whichArt.offsetTop - touch.pageY; coin.addEventListener("touchmove", touchMove, { passive: false }); function touchMove(e) { const touch = e.touches[0]; const positionX = touch.pageX + moveOffsetX; const positionY = touch.pageY + moveOffsetY; coin.style.left = `${positionX}px`; coin.style.top = `${positionY}px`; } } document.body.addEventListener('touchstart', touchStart, { passive: false }); })();

編輯

---

我查看了您鏈接的網站上的代碼，我意識到硬幣沒有被拖動的一個原因是因為我們正在使用touch ，也因為我傳遞給touchmove事件的once選項。

每當使用touchmove事件時，我們必須使用新的 touch 來獲取屏幕上的pageX和pageY位置，我決定為touchmove事件創建一個 function，因為每當調用touchstart function 時，都會注冊一個新的touchmove事件因為匿名的 function 處理程序。

因此，為其創建和命名 function 將阻止添加相同的 function。