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

Question

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

Answer 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版本。