Javascript 什么'；这是Android版Chrome的一个解决方案'；什么是不正确的clientX和clientY行为？

在Android版本16和18的Chrome中（至少）存在一个错误，错误地报告了

clientX

和

clientY

。如果滚动页面，

clientX/Y

的值将至少对

touchstart

事件不正确，但对

click

事件不正确。这里有一个bug：

其中包含以下示例，您可以自己尝试：

我在这里用canvas做了一个类似的例子：

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

有趣的是，clientX和clientY在

单击事件中没有像在
touchstart上那样被破坏

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

确定浏览器是否受到影响，最好不要让用户做任何事情，也不要检查userAgent（因此不要对特定的浏览器版本做出任何假设）。换句话说，我们如何判断哪些浏览器的
clientX
和
clientY
值不好？
可靠地解决这个问题，并且只在需要解决的浏览器上解决（大概只有Android版的Chrome和特定版本的Chrome，因为未来的版本可能会更好），似乎通过
窗口来抵消。scrollX/Y
是这里唯一需要做的事情
我先检查一下


使用。这修复了移动浏览器应用程序中的许多位置问题，尤其是Android。不确定它是否对您的特定问题有帮助，但值得一试。
只需使用
e.pageY-window.scrollY
代替
e.clientY
（或
X
）

 <代码> E.Payy 将给出事件发生的位置，并通过<代码>窗口进行偏移。ScROLLY 将“由于滚动而取消屏幕外的空白”。您可以有条件地检查
e.pageY-window.scrollY===e.clientY
，但是由于解决方法为您提供了正确的值，并且您必须计算它以进行检查，这将违反直觉
 您可以在画布上订阅
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
        }
    });
});

等一下，有什么不对劲。很快将修改答案，抱歉造成混淆。假设它始终等于正确的值，使用
e.pageY-window.scrollY
代替
e.clientY
似乎是非常可能的。我们可以确定吗？如果您希望获取事件发生在当前视口中的位置，可以
window.scrollY
是屏幕与文档顶部的距离，
e.pageY
是事件与文档顶部的距离。有一种情况需要小心，那就是如果您使用了一些foscolling包装元素而不是窗口来滚动页面。我不知道你为什么要这么做，但我不确定这是否足够。我需要画布点击和触摸的协调代码，在尽可能多的DOM情况下都是防弹的possible@SimonSarris事实上，没有，我测试过，它甚至可以在可滚动的元素中工作。我不确定，但我发现了这个问题的讨论，也许这会对你有所帮助：除了使用正确的值来判断哪些浏览器有这种行为之外，你还有其他原因吗？该解决方案使得条件检查的效率低于仅使用不同的方法来计算clientX/Y的效率。这是否适用于所有可能的DOM配置？我曾经使用PageX/Y和offset，但不得不停止使用，因为Firefox处理offset的方式与其他浏览器不同。我似乎记得内联div是个问题，但我现在不记得了。
canvas
默认情况下是内联的，并且可以工作。你得试试看。此外，您还可以使用特殊情况下的Chrome来使用它，并依赖于其他浏览器的
clientX
。这实际上适用于除android上的Chrome之外的所有浏览器和操作系统。一旦你收缩和缩放页面，偏移量就会变大（比它应该的大。我不知道如何解决它）。