Question

如何使用jquery选择器仅选择父级但排除子级

HTML

<div id="container">
  <div class="element">
    <img src="something.jpg"/>
    <a href="somelink">Some link</a>
    <p>Blah blah...</p>
  </div>
  <div class="element">
    <img src="something2.jpg"/>
    <a href="somelink2">Some link2</a>
    <p>Blah blah...</p>
  </div>
</div>

JQuery的：

只有当用户点击（div“元素”）时才能触发警报（“Hi”），但是当＆lt; a＆gt;和＆lt; img＆gt;点击

                    $("#container").delegate(".element", "click", function(){
                        alert("Hi");
                    });

Answer 1

除非您明确停止传播，否则事件会使DOM冒泡。我建议你尝试使用它，而不是反对它。也就是说，如果你坚持，请检查event.target以确保点击div.element，而不是其中一个孩子：

$("#container").delegate(".element", "click", function(event) {
    if (!$(event.target).hasClass("element")) return;
    alert("Hi");
});

http://jsfiddle.net/mattball/JMDLq/

Answer 2

我昨天刚回答了同样的问题，在询问之前先搜索一下。

https://stackoverflow.com/a/10440234/1331430

只需用$('.element')替换那里的2个ID选择器即可。

仅将操作分配给父元素，排除子元素

2 个答案: