javascript - 未触发子元素的点击

Question

演示 http://jsfiddle.net/tsxb8/

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

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

如我所见，当用户单击不属于子区域(浅灰色​​，警报 = 2)的父区域(深灰色，警报 = 1)时，不会触发子单击处理程序。

我该如何解决这个问题？

Answer 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