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

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>

查询：

仅当用户单击（div“元素”）而不是单击 <a> 和 <img> 时，如何触发警报（“Hi”）

                    $("#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

只需替换那里的 2 个 ID 选择器，$('.element')一切就绪。