我想使用画布制作一个小绘画应用程序。所以我需要在画布上找到鼠标的位置。
查找鼠标相对于元素的位置
IT技术
javascript
2021-02-05 19:19:45
6个回答
由于我没有找到可以复制/粘贴的无 jQuery 答案，这是我使用的解决方案：
document.getElementById('clickme').onclick = function clickEvent(e) {
// e = Mouse click event.
var rect = e.target.getBoundingClientRect();
var x = e.clientX - rect.left; //x position within the element.
var y = e.clientY - rect.top; //y position within the element.
console.log("Left? : " + x + " ; Top? : " + y + ".");
}#clickme {
margin-top: 20px;
margin-left: 100px;
border: 1px solid black;
cursor: pointer;
}<div id="clickme">Click Me -<br>
(this box has margin-left: 100px; margin-top: 20px;)</div>对于使用 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() 的支持。
下面计算鼠标与canvas元素的位置关系：
var example = document.getElementById('example');
example.onmousemove = function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
}
在这个例子中，this指的是example元素，e是onmousemove事件。
当参考元素嵌套在其他可以具有绝对定位的元素中时，纯 javascript 中没有返回相对坐标的答案。这是这种情况的解决方案：
function getRelativeCoordinates (event, referenceElement) {
const position = {
x: event.pageX,
y: event.pageY
};
const offset = {
left: referenceElement.offsetLeft,
top: referenceElement.offsetTop
};
let reference = referenceElement.offsetParent;
while(reference){
offset.left += reference.offsetLeft;
offset.top += reference.offsetTop;
reference = reference.offsetParent;
}
return {
x: position.x - offset.left,
y: position.y - offset.top,
};
}
我尝试了所有这些解决方案，但由于我使用矩阵转换容器（panzoom 库）的特殊设置，没有任何效果。即使缩放和平移，这也会返回正确的值：
mouseevent(e) {
const x = e.offsetX,
y = e.offsetY
}
但前提是没有子元素挡路。这可以通过使用 CSS 使它们对事件“不可见”来规避：
.child {
pointer-events: none;
}