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

Question

在Android版Chrome版本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浏览器),但Chrome for Android似乎在滚动时打破了clientX/Y(至少某些)触摸事件.

有趣的是,clientX和clientY并没有click像它们一样打破事件touchstart.

我的问题是,使clientX和clientY在浏览器中一致地工作的最佳解决方法是什么？看来,以抵消window.scrollX和window.scrollY将"解决"的问题,而是一个很好的解决办法需要:

1. 确定浏览器是否受到影响,最好不要让用户做任何事情,也不要求助于检查userAgent(因此不要对特定浏览器版本做任何假设).换句话说,我们如何知道哪些浏览器有坏值clientX和clientY？
2. 只有在那些需要解决的浏览器上才能可靠地解决这个问题(大概只有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,但由于变通方法为您提供了正确的值,并且您必须计算它以进行检查,这将是违反直觉的.