javascript 我们应该使用什么替代物来代替 layerX/layerY，因为它们在 webkit 中已被弃用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8389156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What substitute should we use for layerX/layerY since they are deprecated in webkit?
提问by Nicolas BADIA
In chrome canary, layerX and layerY are deprecated, but what should we use instead ?
在 chrome canary 中，layerX 和 layerY 已被弃用，但我们应该使用什么来代替？
I've find offsetX but it doesn't work with Firefox. So to get layerX without warning on webkit, I've done that :
我找到了 offsetX，但它不适用于 Firefox。所以为了在 webkit 没有警告的情况下获得 layerX，我已经做到了：
var x = evt.offsetX || evt.layerX,
y = evt.offsetY || evt.layerY;
But this seem quite complex ! Is that really what we should do to get layerX working in all browsers ?
但这似乎相当复杂！这真的是我们应该做的让 layerX 在所有浏览器中工作吗？
采纳答案by Nicolas BADIA
Here is a function to calculate layerX and layerY from a click event:
这是一个从点击事件计算 layerX 和 layerY 的函数：
function getOffset(evt) {
var el = evt.target,
x = 0,
y = 0;
while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
x += el.offsetLeft - el.scrollLeft;
y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
x = evt.clientX - x;
y = evt.clientY - y;
return { x: x, y: y };
}
Thanks a lot to Stu Cox for pointing out the two functions used to make this one.
非常感谢 Stu Cox 指出用于制作这个函数的两个函数。
回答by Sanne
Are you sure layerX and layerY are deprecated?
您确定不推荐使用 layerX 和 layerY 吗？
In my experience they are still there, mostly because the related properties offsetX and offsetY are not implemented in other browsers:
根据我的经验，它们仍然存在，主要是因为相关的属性 offsetX 和 offsetY 没有在其他浏览器中实现：
There is a lot of discussion going on at webkit and mozilla though:
不过，在 webkit 和 mozilla 上有很多讨论：
https://bugs.webkit.org/show_bug.cgi?id=21868and https://bugzilla.mozilla.org/show_bug.cgi?id=674292In a nutshell, they are both a bit inconclusive whether or not to remove it, so for now they did not remove it.
https://bugs.webkit.org/show_bug.cgi?id=21868和https://bugzilla.mozilla.org/show_bug.cgi?id=674292简而言之，它们是否删除都有些不确定它，所以现在他们没有删除它。
later IE versions provide an alias that maps to the x and y properties (I am not allowed to post any further links by stack overflow, because of a lack of 'reputation').
后来的 IE 版本提供了一个映射到 x 和 y 属性的别名（由于缺乏“声誉”，我不允许通过堆栈溢出发布任何进一步的链接）。
回答by Stu Cox
The only reasonably cross-browser ways to detect mouse position are clientX/clientY(relative to window), screenX/screenY(relative to entire screen) and pageX/pageY(relative to document, but not supported in IE8 and below).
唯一合理的跨浏览器检测鼠标位置的方法是clientX/ clientY（相对于窗口）、screenX/ screenY（相对于整个屏幕）和pageX/ pageY（相对于文档，但在 IE8 及以下不支持）。
Quirksmodesuggests this for standardising to a relative-to-document value:
Quirksmode建议将其标准化为相对于文档的值：
function doSomething(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// posx and posy contain the mouse position relative to the document
// Do something with this information
}
Then you could use thisto work out its position relative to your element.
然后你可以使用它来计算它相对于你的元素的位置。
Horrible, I know, but the internet's a horrible place.
可怕，我知道，但互联网是一个可怕的地方。
