我想做一个小绘画应用程序使用画布。所以我需要找到鼠标在画布上的位置。
当前回答
你可以使用相对父类的getBoudingClientRect()。
document.addEventListener("mousemove", (e) => {
let xCoord = e.clientX - e.target.getBoundingClientRect().left + e.offsetX
let yCoord = e.clientY - e.target.getBoundingClientRect().top + e.offsetY
console.log("xCoord", xCoord, "yCoord", yCoord)
})
其他回答
基于@Spider的解决方案,我的非JQuery版本是这样的:
// Get the container element's bounding box
var sides = document.getElementById("container").getBoundingClientRect();
// Apply the mouse event listener
document.getElementById("canvas").onmousemove = (e) => {
// Here 'self' is simply the current window's context
var x = (e.clientX - sides.left) + self.pageXOffset;
var y = (e.clientY - sides.top) + self.pageYOffset;
}
这适用于滚动和缩放(在这种情况下,有时它返回浮动)。
对于使用JQuery的人:
有时,当您嵌套元素时,其中一个元素附加了事件,可能会让您难以理解浏览器将什么视为父元素。在这里,您可以指定哪个父节点。
取鼠标位置,然后从父元素的偏移位置中减去它。
var x = evt.pageX - $('#element').offset().left;
var y = evt.pageY - $('#element').offset().top;
如果你想在滚动窗格中获取页面上的鼠标位置:
var x = (evt.pageX - $('#element').offset().left) + self.frame.scrollLeft();
var y = (evt.pageY - $('#element').offset().top) + self.frame.scrollTop();
或相对于页面的位置:
var x = (evt.pageX - $('#element').offset().left) + $(window).scrollLeft();
var y = (evt.pageY - $('#element').offset().top) + $(window).scrollTop();
注意以下性能优化:
var offset = $('#element').offset();
// Then refer to
var x = evt.pageX - offset.left;
通过这种方式,JQuery不必为每一行查找#element。
更新
在@anytimecoder的回答中有一个更新的、仅支持javascript的版本——另请参阅浏览器对getBoundingClientRect()的支持。
这是我得到的。
$(".some-class").click(function(e) {
var posx = 0;
var posy = 0;
posx = e.pageX;
posy = e.pageY;
alert(posx);
alert(posy);
});
因为我没有找到一个解决方案,可以帮助你得到它,如果你把它附加到一个父母元素,你有一个例如选择。
这就是我所做的:
let positions = {
x: event.pageX,
y: event.pageY - event.currentTarget.getBoundingClientRect().top + event.currentTarget.offsetTop
}
Mark van Wyk的回答让我找到了正确的方向,但并没有完全解决我的问题。我仍然在另一个元素中包含的元素中绘画。
以下解决了它为我:
x = e.pageX - this.offsetLeft - $(elem).offset().left;
y = e.pageY - this.offsetTop - $(elem).offset().top;
换句话说,我简单地堆叠了所有嵌套元素的偏移量