单击子项时触发父项单击事件答案

【问题标题】：trigger parent click event when child is clicked单击子项时触发父项单击事件
【发布时间】：2013-11-28 15:03:35
【问题描述】：

我对 javaScript 和 jQuery 不熟悉。当您单击其子元素时，如何调用父元素的单击事件？我的代码中有这个结构：

<ul id="pc5">
   <li><a href="#">book</a>
   </li>
</ul>

我想要这样的东西：

$("a").click(ul.click);

任何帮助将不胜感激。

编辑：在我的 ul 点击功能中，我需要 ul id 属性。像这样：

 ul.click(function(e){alert(e.target.id);

所以当点击链接时，event.target 不是 ul 元素。

【问题讨论】：

当点击子元素时，父元素的点击事件也会因为事件冒泡而被触发，除非子元素阻止了事件传播
您不需要这样做 - 来自 a 元素的 click 事件将冒泡到 ul，除非您在 @987654329 上使用 return false; 或 event.stopPropagation @点击处理程序。

【解决方案1】：

如果您的子元素位于父元素内，您也可以添加此 CSS 属性。

.child {
   pointer-events: none
}

这样点击直接触发父级的点击事件监听。

此功能的支持是quite good。

【讨论】：

【解决方案2】：

子元素被点击时不需要触发元素点击事件，如果不stop propagation，点击事件bubbles在dom树上向上。

在这里你可以看到它正在工作：jsfiddle 只需点击蓝色跨度，点击事件将冒泡到 ul :)

更新问题

如果你想要 ul 的 id，只需：

$('ul li a').click(function() {
  var id = $(this).closest('ul').attr('id');
});

这样会更容易：

$('ul').click(function() {
   var id = $(this).attr('id');
   alert(id);
});

如果你点击一个，这应该可以工作，因为它会冒泡

【讨论】：

感谢您的回答。请查看问题的编辑部分。
您在 UL 上附加了一个 .click 事件，在这种情况下是父级。 OP 想在孩子身上附加一个 .click 事件（根据他的问题 - 他可能想根据他需要做的事情重新设计）。
不，你错了，谢谢你的反对！再次阅读问题，他甚至给出了一个 ul.click 示例。因为如果单击 a 或 ul 无关紧要，我的代码可以正常工作。并且由于不清楚操作是否需要函数中的 a 标记，所以我的代码完美地回答了操作问题，不是吗？
对不起，我没有看到 ul 点击示例 :(
@Alex：通过一些更改，我的代码现在可以完美运行。谢谢。

【解决方案3】：

您应该阅读 jQuery 中的 event propagation。简而言之：当用户点击a 时，事件将在 DOM 树中向上传播。

【讨论】：

【解决方案4】：

我有这样的html：

<a href="?chk=1">
    <input id="CHK_1" name="CHK[1]" type="checkbox">
    <span>CHK 1</span>
</a>

应该仅从服务器端选中/取消选中复选框的位置。由于我不知道的原因，“点击”没有从复选框冒泡到链接，所以我使用了这样的js代码：

$(document).on('click', '[id^="CHK_"]', function (e){
    window.open($(this).parent().attr('href'), '_self');
    e.preventDefault();
});

【讨论】：