對於Android的不正確的clientX和clientY行爲，Chrome的解決方法是什麼？

Question

在適用於Android版本16和18（至少）的Chrome中，存在錯誤地報告clientX和clientY的錯誤。如果頁面滾動，至少touchstart事件的clientX/Y值將不正確，但不是click事件。有在這裏討論了一個錯誤：

https://code.google.com/p/chromium/issues/detail?id=117754

其中包含了這個例子，你可以嘗試一下自己：http://www.apprisant.com/tab/cd.html

我已經用帆布這裏一個類似的例子：http://codepen.io/simonsarris/full/dJcvn

這些例子在其他移動瀏覽器（包括普通的舊版Android瀏覽器）上工作，但Chrome for Android似乎在滾動時（至少有一些）觸摸事件破壞了clientX/Y。

有趣的是，客戶端X和客戶端Y在click事件中沒有損壞，就像他們在touchstart上一樣。

我的問題是，什麼是讓clientX和clientY在瀏覽器中一致工作的最佳解決方法是什麼？看來，與window.scrollX和window.scrollY抵消將「解決」的問題，而是一個很好的解決辦法需要：

1. 確定瀏覽器罹患與否，最好不給用戶做任何事情，而不是訴諸檢查userAgent（所以不作任何特定瀏覽器版本的假設）。換句話說，我們如何判斷哪些瀏覽器對於clientX和clientY有不良的值？
2. 只有在需要解決的瀏覽器上才能可靠地解決問題（大概只有Android版Chrome和僅適用於Chrome的特定版本，因爲將來的版本可能會很好），看起來，window.scrollX/Y抵消是唯一需要的在這裏完成。

Answer 1

只需使用e.pageY - window.scrollY來代替e.clientY（或相應地X）。

e.pageY會告訴你事件發生的位置，並且抵消window.scrollY將「刪除由於滾動而導致的不在屏幕上的空白區域」。您可以有條件地檢查e.pageY - window.scrollY === e.clientY，但由於解決方法爲您提供了正確的值，並且您必須計算它來檢查它，所以這是違反直覺的。

Answer 2

我會通過檢查

<meta name="viewport" content="width=device-width, initial-scale=1">

用於啓動。這已經修復了移動瀏覽器應用程序中很多位置問題，特別是Android。不知道它是否會幫助您解決特定問題，但值得一試。

Answer 3

您可以在畫布上訂閱touchstart事件，並使用.offset()和e.pageX獲取畫布內的位置。

$('#my-canvas').on('touchstart', function (startEvent) { 
    var offset = $(this).offset(); 

    $(this).on('touchmove', function (moveEvent) { 
     var pos = { 
      x: moveEvent.pageX - offset.left, 
      y: moveEvent.pageY - offset.top 
     } 
    }); 
});