jQuery 鼠标相对于冒泡事件上的侦听元素移动偏移量



如果我让 jQuery 侦听"外部"元素上的 mousemove 事件,则当鼠标位于该内部元素内并且事件冒泡到处理程序时,offsetXoffsetY 值会相对于"内部"元素给出偏移量。

如何始终获取相对于处理程序所附加到的元素的偏移量?

例: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/

这是我当前的解决方案,我欢迎任何改进建议。

function (e) {
  var y = e.pageY - $(e.currentTarget).offset().top
  var x = e.pageX - $(e.currentTarget).offset().left
  ...
}

理想情况下,这将作为事件对象的属性之一给出,但我找不到匹配的属性。

最新更新