如果我让jQuery在“外部”元素上侦听mousemove
事件,那么offsetX
和offsetY
值会在鼠标位于相对于“内部”元素时产生偏移量在那个内部元素中,事件起泡到处理程序。
如何始终获取相对于处理程序所附加元素的偏移量?
实施例: http://jsfiddle.net/00mo3eeu/
HTML
<div class="outer">
<div class="inner"></div>
</div>
CSS
.outer {
background: red;
width: 300px;
height: 400px;
margin: 40px;
}
.inner {
background: blue;
width: 100px;
height: 150px;
margin: 70px;
display: inline-block;
}
JS
$('.outer').mousemove(function(e) {
console.log([e.offsetY, e.offsetX]);
});
更新:如果不清楚,即使在蓝色框中http://jsfiddle.net/00mo3eeu/1/
,也要点亮指针答案 0 :(得分:6)
这是我目前的解决方案,我欢迎任何改进建议。
function (e) {
var y = e.pageY - $(e.currentTarget).offset().top
var x = e.pageX - $(e.currentTarget).offset().left
...
}
理想情况下,这将作为事件对象的一个属性给出,但我找不到匹配的属性。