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

我在这里用canvas做了一个类似的例子：http://codepen.io/simonsarris/full/dJcvn

这些示例适用于其他移动浏览器（包括普通的旧版Android浏览器），但Chrome for Android似乎在滚动时打破了（至少某些）触摸事件上的clientX / Y.

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

我的问题是，让clientX和clientY在浏览器中保持一致的最佳解决方法是什么？似乎与window.scrollX和window.scrollY抵消会“解决”问题，但一个好的解决方法需要：

确定浏览器是否受到影响，最好不要让用户做任何事情，也不要求助于检查userAgent（因此不要对特定浏览器版本做任何假设）。换句话说，我们如何判断哪些浏览器的clientX和clientY值不正确？
可靠地解决问题，仅限于需要解决的浏览器（可能只有Chrome for Android及其特定版本，因为未来的版本可能会很好），看似偏移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
        }
    });
});

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

3 个答案: