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

Question

在 Chrome for Android 版本 16 和 18(至少)中存在一个错误报告 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 浏览器)，但 Android 版 Chrome 在滚动时似乎在(至少某些)触摸事件上破坏了 clientX/Y。

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

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

1. 确定浏览器是否受到影响，最好不要让用户做任何事情，也不要求助于检查 userAgent(因此不要对特定浏览器版本做出任何假设)。换句话说，我们如何判断哪些浏览器的 clientX 和 clientY 值不正确？
2. 仅在需要解决的那些浏览器上可靠地解决问题(大概只有 Chrome for Android 和它的特定版本，因为 future 的版本可能会很好)，看似由 window.scrollX/Y 抵消 是这里唯一需要做的事情。

Answer 1

只需使用 e.pageY - window.scrollY 代替 e.clientY(或相应的 X)。

e.pageY 将为您提供事件发生的位置，并且通过 window.scrollY 进行偏移将“删除由于滚动而出现在屏幕外的空白区域”。您可以有条件地检查 e.pageY - window.scrollY === e.clientY，但是由于解决方法为您提供了正确的值，并且无论如何您都必须计算它来检查它，那就是反直觉。