25

在 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. 仅在需要解决的那些浏览器上可靠地解决问题（大概只有 Chrome for Android 和它的特定版本，因为未来的版本可能会很好），看起来，抵消window.scrollX/Y是这里唯一需要做的事情。
4

3 回答 3

14

只需使用e.pageY - window.scrollY代替e.clientY（或X相应地）。

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

于 2012-12-07T15:23:31.890 回答
3

我会先检查一下

<meta name="viewport" content="width=device-width, initial-scale=1">

用来。这解决了移动浏览器应用程序中的许多位置问题，尤其是 Android。不确定它是否会帮助您解决特定问题，但值得一试。

于 2012-12-07T15:13:39.953 回答
0

您可以在画布上订阅touchstart事件并使用.offset()ande.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
        }
    });
});
于 2012-12-13T07:34:27.200 回答