Question

我在类'node'的所有元素上触发了.mouseover（）事件。它工作正常，当用户将鼠标悬停在.node的任何子节点上时也会触发。这对我很有用，但是，如果用户将鼠标悬停在特定的孩子上，即图像，我不希望触发此事件。

为什么选择器 $（'。node：not（img）'）无效？

奇怪的是，当我在http://www.woods.iki.fi/interactive-jquery-tester.html尝试时，它确实有效，但在我的实际实现中却没有。

我的HTML：

    <div id="container">
            <div class="node" id="abc">
            <h2>Node Title</h2>
            <div class="nodeChildren">
                    <h3 id="a1">Some text</h3>
                    <h3 id="a2">Some text</h3>
                    <h3 id="a3">Some text</h3>
            </div>
            <img src="diagonal-left.gif" />
            </div>
    </div>

我的jquery：

    //start with third tier not visible
    $('.nodeChildren').hide();

    $('.node :not(img)').mouseover(function(){
            $(this).children('div').show();
    });  

    $('.node').mouseout(function() {
            $('.nodeChildren').hide();
    });

}）;

我失败的尝试

$('.node :not(img)') //no mouseover is triggered

//for the following selectors, the mouseover event is still triggered on img
$('.node').not('img') 
$('.node').not($('.node').children('img'))

感谢您的帮助：）

Answer 1

问题是事件是“冒泡”到父母身上，导致鼠标悬停。您需要将鼠标悬停添加到img以停止此操作。

$(".node img").bind("mouseover", function(event) {
  event.stopPropagation();
});

Answer 2

在bind的回调函数中，可以检查目标。在你的情况下，像这样的东西

$(".node").bind('mouseover',function(e){

    if(e.target.nodeName != 'IMG'){
        $(this).children('div').show();
    }

});

jquery - 如何选择元素和所有子元素，特定子元素除外

2 个答案: