小编典典

查找鼠标相对于元素的位置

javascript

我想使用画布制作一个绘画应用程序。所以我需要找到鼠标在画布上的位置。


阅读 1043

收藏
2020-05-01

共1个答案

小编典典

对于使用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为支持getBoundingClientRect()的浏览器提供了一个更高的纯JavaScript版本。

2020-05-01