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

发布于 2024-11-04 06:51:09 字数 688 浏览 1 评论 0原文

我有这段代码：

$('.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>

它仅在鼠标不悬停项目时才有效...我如何忽略它们，但获得正确的值？

我已经尝试过：

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

但没有获得正确的物品价值......

原文

I've this code:

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

And this 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>

it works only when mouser don't hover items... how can I ignore them, but getting right value?

I've tried:

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

but don't get right value over items...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等往事风中吹 2024-11-11 06:51:09

欢迎来到堆栈溢出！

使用事件属性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);
});

查看我的 jsFiddle 测试用例

Welcome to Stack Overflow!

Use the event attributes layerX and layerY to get the desired values. The offsetX and offsetY attributes are always relative to the element that is below the cursor, even though the event is bound to a parent. The same applies to the target attribute.

Also, I prefer using currentTarget since it makes your code a bit easier to read and understand without having to trace the origin of 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);
});

Check out my test case on jsFiddle

回复收藏 0 原文

~没有更多了~