jQuery子元素捕获点击事件，我只想要父元素

Question

假设我有这个：

<div id="outer">
 <div id="inner">
 </div>
</div>

外层div的尺寸为500x500，内层div的尺寸为100x100。我试图采用以下方法：

$('#outer').click(function() {
    $('#outer').fadeOut();
});

但是当你点击#inner的100x100区域时，它仍然会淡出。如何防止这种情况发生？

- steve

---

你的意思是子元素正在捕获点击事件，而你只想让父元素捕获？ - colinmarc

啊，是的，我打错了。对于下面两个人，我已经修改了标题。我希望外部div能捕获点击事件，但内部div应该忽略它们。如果用户点击100x100的“#inner”，我希望它保持打开状态，但如果你在外面点击，它需要淡出。 - steve

Answer 1

我发现这段代码效果更好，而且不需要知道元素的id或class：

$('#outer').click(function(e) {
    if (e.target === this){
        $('#outer').fadeOut();
    }
});

- Cristian

---

你甚至可以再进一步，执行$(this).fadeOut();。 - Ben Lee

Answer 2

最好不要为内部元素分配点击处理程序。在单击函数中检查事件目标是否等于外部元素。类似于以下内容：

$('#outer').click(function(e) {
    if (e.target.id === "outer"){
        $('#outer').fadeOut();
    }
});

可运行演示

- rahul

Answer 3

捕获内部div上的点击事件并阻止其冒泡：

$('#inner').click(function(ev) {
  ev.stopPropagation();
});

这是对你上面的“外部”点击处理程序的补充。

- Ben Lee

---

我需要#outer捕获点击事件，而内部元素则不需要。内部的div中会有链接，因此这些链接需要能够被点击而不会关闭。一旦点击了#outer，它应该关闭。 - steve

请告诉我们您想要执行的每个步骤，也许我们可以提供帮助。 - klox

啊，我重新应用了上面的代码，这次它起作用了。上次一定是打错了什么。谢谢大家。 - steve