javascript - 让jQuery忽略事件中的孩子

Question

如果我有以下标记：

<ul id="level1">
    <li>
        <a href="#">Test</a>
        <ul id="level2">
            <li>
                <a href="#">Test</a>
            </li>
        </ul>
    </li>
</ul>

基本上，如果我将鼠标悬停在 1 级上，我需要它来做某事。但是，当我将鼠标悬停在 level2 上时，它会触发它，因为它在 level1 内。如果我将鼠标悬停在 level1 上，有没有办法做到这一点。

我的意思的一个例子：

http://scottymeuk.in/Netr

左边的盒子是右边盒子的父级。但是当悬停在左框（父）而不是右框（子）上时，我需要发生一些事情。

谢谢你。

抱歉，如果我未能很好地解释我的问题。

Answer 1

一种解决方案是打电话event.stopPropagation给孩子：

$("#parent").on("someevent", function(){
  // do stuff
});

$("#child").on("someevent", function(e){
  e.stopPropagation(); // prevent the event from bubbling to the parent.
});

Answer 2

请参阅事件对象文档...

http://api.jquery.com/category/event-object/

event.stopPropagation();

是你需要的

$('#level2').hover)function(e) {
    e.stopPropagation(); // stops events from triggering in children
},function (e) {}

Answer 3

$('level1').hover(function(){ if(!IsMouseOver($(this).find(level2)){ do what you want it to do }; });

我还没有测试它，但你明白了逻辑。鼠标在level1上吗？是的。如果它超过 1 级并且它没有超过 2 级做我想要的