Question

我有这段代码：

$('.div2').mousemove(function(e) {
    var posX = (50 - (e.offsetX) / $(this).width() * 100);
    var posY = (-50 + (e.offsetY) / $(this).height() * 100);
    $('.results').html(posX+', '+posY);
});

这个html：

<div class="div1">
  <div class="div2">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>
<div class="results"></div>

只有当mouser不悬停物品时它才有效...我怎么能忽略它们，但能得到正确的价值？

我试过了：

if(e.target != this){
    return true;
}

但物品价值不合适......

Answer 1

欢迎使用Stack Overflow！

使用事件属性layerX和layerY来获取所需的值。 offsetX和offsetY属性始终相对于光标下方的元素，即使事件绑定到父级也是如此。这同样适用于target属性。

此外，我更喜欢使用currentTarget，因为它使您的代码更易于阅读和理解，而无需追踪this的来源。

$('.div2').mousemove(function(e) {
    var posX = (50 - (e.layerX) / $(e.currentTarget).width() * 100);
    var posY = (-50 + (e.layerY) / $(e.currentTarget).height() * 100);
    $('.results').html(posX+', '+posY);
});

查看我的test case on jsFiddle

如何使用JQuery忽略所有子元素

1 个答案: