javascript - 并非所有子元素都会触发 Javascript 中的父元素点击处理程序（不是 preventDefault 问题）

Question

我有父 div - .parent- 高度为 300 像素，宽度为 200 像素（没关系）。

我在 div 中有一个.child1, .child2,.child3元素.parent，每个元素都有内容和高度/宽度（这只是为了简单起见，每个子元素中有更多的嵌套）。所有 3 个子元素一起占据整个父容器的高度。（例如，每个孩子都有 100px 的高度）。

我在.parentdiv 上有一个点击监听器：

 $('.parent').click(function (){
    console.log("Parent div clicked");
 });

我注意到.parent只有当我点击.child3元素时才会触发我的点击处理程序。当我点击child1或child2- 事件不会被触发。

父单击处理程序仅在单击时起作用而在单击时.child3不起作用的可能原因是什么？.child1.child2

我不能分享这个问题的整个 javascript/css，因为每个子元素和父元素都有很多相关联。我只是想得到一个提示我应该去哪里看？

我最初的想法是有一些与 ,preventDefault/stopPropagation相关联.child1，.child2这会阻止在父元素上触发点击，但是，我没有找到 preventDefault与 .child1or相关联的任何内容.child2。另外，也查pointer-events了。

还有什么可以影响它？Z指数？立场：绝对？

更新： 我还在文档上添加了单击处理程序，以查看单击.child1或.child2。但是，当我单击.child1或.child2。仅当我单击时才会触发.child3（与 for 相同.parent）。

$(document).click(function(event) {
  console.log("Document click: " + event);
});

标签： javascriptjqueryhtmlcss