当子元素被点击时触发父元素的点击事件

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);

当链接被点击时，事件目标不是 ul 元素。

- Alireza Farahani

---

除非子元素阻止事件传播，否则当子元素被点击时，父元素的点击事件也会被触发，这是由于事件冒泡引起的。 - Arun P Johny

您不需要这样做 - a 元素的 click 事件会向上冒泡到 ul，除非您在 a 的点击处理程序中使用 return false; 或 event.stopPropagation。 - Rory McCrossan

Answer 1

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

.child {
   pointer-events: none
}

这种方式直接触发了父元素的点击事件监听器。

这个特性的支持相当不错。

- Nasta

Answer 2

当单击子元素时，无需触发元素点击事件，如果您不停止冒泡，则单击事件会向上冒泡到dom树。

在此您可以查看其工作方式：jsfiddle只需单击蓝色span，单击事件将向上冒泡到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);
});

可运行的示例代码

如果您点击一个链接，它会冒泡并起作用。

- Alex

---

@Alex：经过一些修改，我的代码现在完美运行了。谢谢你。 - Alireza Farahani

Answer 3

你应该阅读关于jQuery中事件传播的内容。简单来说：当用户点击a时，事件会在DOM树中向上传播。

- Kasyx

Answer 4

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

- Andrei