我想使用画布制作一个绘画应用程序。所以我需要找到鼠标在画布上的位置。
对于使用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每一行。
#element
下面的@anytimecoder为支持getBoundingClientRect()的浏览器提供了一个更高的纯JavaScript版本。