Chrome for Android 的错误 clientX 和 clientY 行为的解决方法是什么？

Question

在 Android 版本 16 和 18 的 Chrome 中（至少）存在错误报告 clientX 和 clientY 的错误。如果页面被滚动，clientX/Y 的值至少对于 touchstart 事件是不正确的，但不是 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 浏览器），但 Android 版 Chrome 似乎在滚动时（至少在某些）触摸事件上破坏了 clientX/Y。

有趣的是，clientX 和 clientY 在 click 事件上并没有像在 touchstart 上那样被破坏。

我的问题是，让 clientX 和 clientY 在浏览器中一致工作的最佳解决方法是什么？ 似乎用 window.scrollX 和 window.scrollY 进行偏移将“解决”这个问题，但是一个好的解决方法需要：

1. 确定浏览器是否受到影响，最好不要让用户做任何事情，也不要求助于检查 userAgent（因此不要对特定浏览器版本做出任何假设）。换句话说，我们如何判断哪些浏览器的 clientX 和 clientY 值不正确？
2. 仅在需要解决的那些浏览器上可靠地解决问题（大概只有适用于 Android 的 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
        }
    });
});