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上？是。如果它超过level1并且它没有超过level2做我想要的

让jQuery在事件中忽略孩子

3 个答案: