未为子元素触发单击答案

【问题标题】：Click not fired for child element未为子元素触发单击
【发布时间】：2013-12-24 17:12:09
【问题描述】：

$('.parent').on('click', function() {
   alert(1); 
});
$('.child').on('click', function() {
   alert(2); 
});

当单击父元素时，我需要启动一些附加到子元素的代码。

正如我所见，当用户点击父区域（深灰色，警报 = 1）时，不会触发子点击处理程序，这不是子区域（浅灰色，警报 = 2）的一部分。

我该如何解决这个问题？

【问题讨论】：

如果你点击孩子，你想让父事件触发
其实用户可以直接点击子元素。我想要一些一致的方式来处理对这两个元素的点击，并使我的代码只工作一次。
"两次点击都被触发了。我只想要两者的回调"？嗯？
然后将两个处理程序都注册到父元素...为什么要将处理程序注册到子元素
我已经编辑了问题，点击子元素应该触发一个回调。

标签： javascript jquery html css events

【解决方案1】：

在父处理程序中显式触发对子的点击：

$('.parent').click(function() {
    alert(1);
    $(this).find('.child').click();
});

$('.child').click(function(e) {
    e.stopPropagation(); // Prevent bubbling to parent, to avoid loop
    alert(2);
});

DEMO

【讨论】：