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

Question

我是javaScript和jQuery的新手。如何在单击其子元素时调用父元素的click事件？ 我的代码中有这个结构：

<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元素。

Answer 1

单击子元素时，您不需要触发元素单击事件，如果您不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);
});

<强> Working fiddle

如果你点击一个因为它冒泡了

，这应该有效

Answer 2

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

Answer 3

我有这样的HTML：

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

其中只应从服务器端检查/取消选中复选框。 由于我不知道的原因，'click'没有从复选框到链接冒泡， 所以我使用了像这样的js代码：

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

Answer 4

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

.child {
   pointer-event: none
}

以便点击直接触发父级的点击事件监听器。

此功能的支持为quite good。