什么是解决办法的Chrome浏览器Android的不正确clientX和clientY行为？ [英] What's a workaround for Chrome for Android's incorrect clientX and clientY behavior?

问题描述

在Chrome浏览器的Andr​​oid版本16和18（至少）有一个报告错误 clientX 和 clientY 不正确。如果页面滚动的的值clientX / Y 将是不正确的，至少在 touchstart 事件，虽然不是点击事件。没有给它一个错误的位置：

<一个href="https://$c$c.google.com/p/chromium/issues/detail?id=117754">https://$c$c.google.com/p/chromium/issues/detail?id=117754

里面包含这个例子，你可以尝试一下： http://www.apprisant.com/tab/cd。 HTML

我做了一个类似的例子用帆布在这里： HTTP：//$c$cpen.io/simonsarris/full / dJcvn

这些例子适用于其他移动浏览器（包括普通的老式Android浏览器），但Chrome浏览器的Andr​​oid似乎滚动的时候已经打破clientX / Y上（至少部分）的触摸事件。

有趣的是，clientX和clientY不上破点击事件就像他们在 touchstart 。

我的问题是，什么是最好的解决方法得到clientX和clientY始终工作在各种浏览器？看来，抵消与 window.scrollX 和 window.scrollY 将解决的问题，而是一个很好的解决办法需要：

1. 确定浏览器患有与否，preferably不给用户做任何事情，而不诉诸检查的userAgent（所以没有作出具体的浏览器版本的任何假设）。换句话说，我们如何知道哪些浏览器有坏值 clientX 和 clientY ？
2. 在解决这一问题可靠，只有在这些浏览器它需要解决（presumably，只有Chrome浏览器Android和它只有特定版本，未来版本可能会被罚款），貌似，抵消由 window.scrollX / Y 的是，这里需要做的唯一的事情。

解决方案

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

e.pageY 会给你那里所发生的事件，并抵消由 window.scrollY 将删除空白空间，即关闭屏幕由于滚动。你可以有条件的检查 e.pageY - window.scrollY === e.clientY ，但由于解决方法为您提供了正确的值，你算算它检查它不管怎么说，这将是反直觉的。

In Chrome for Android versions 16 and 18 (at least) there is a bug that reports clientX and clientY incorrectly. If the page is scrolled the values of clientX/Y will be incorrect for at least the touchstart event, though not the click event. There is a bug for it here:

https://code.google.com/p/chromium/issues/detail?id=117754

Which contains this example, that you can try yourself: http://www.apprisant.com/tab/cd.html

I have made a similar example with canvas here: http://codepen.io/simonsarris/full/dJcvn

These examples work on other mobile browsers (including the plain old Android Browser) but Chrome for Android seems to have broken clientX/Y on (at least some) touch events when scrolled.

Interestingly, clientX and clientY are not broken on the click event like they are on touchstart.

My question is, what's the best workaround to get clientX and clientY working consistently across browsers? It appears that offsetting with window.scrollX and window.scrollY will "solve" the issue, but a good workaround needs to:

1. Determine that the browser is afflicted or not, preferably without making the user do anything and without resorting to checking the userAgent (so not making any assumptions of specific browser versions). In other words, how do we tell which browsers have bad values for clientX and clientY?
2. Solve the issue reliably and only on those browsers where it needs solving (presumably, only Chrome for Android and only specific versions of it, as future versions may be fine), Seemingly, offsetting by window.scrollX/Y is the only thing that needs to be done here.

解决方案

Simply use e.pageY - window.scrollY in place of e.clientY (or X, accordingly).

e.pageY will give you where the event happened, and offsetting by window.scrollY will "remove the blank space" that is off-screen due to scroll. You COULD conditional check that e.pageY - window.scrollY === e.clientY, but since the workaround gives you the correct value, and you have to calculate it to check it anyways, that would be counter-intuitive.

这篇关于什么是解决办法的Chrome浏览器Android的不正确clientX和clientY行为？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！