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

Question

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

score 7 · Accepted Answer

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

.child {
   pointer-events: none
}

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

这个功能的支持相当不错。

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

我有这样的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();
});

4 回答 4