Question

我不确定如何在jQuery中解决以下事件冒泡问题。

我在list元素（li）中有一个链接，它有一个on click事件。我想对li元素进行操作，如果用户单击list元素中的链接，则会调用链接事件（单击）并调用li上的操作（我总是希望在li或其他任何内部点击时触发li上的click事件）。

我该如何做到这一点？

这是HTML代码：

<li>
   <img src="images/img.png" />
   <a href="/remote/path" data-remote="true">Link</a>
</li>

和jQuery代码（显然不起作用）：

$("li a").click(function(e) {
  e.preventBubble = true;
});

$("li").click(function() {
  $el = $(this).find('a');
  $el.click();
  $(this).addClass('active');
});

对此最优雅的解决方案是什么？

感谢您的帮助！

Answer 1

如果我理解正确，你应该使用jQuery .stopPropagation()而不是自己实现。

<强> event.stopPropagation（）

描述：防止事件冒泡DOM树，   防止任何父处理程序被通知事件。

实施：

$("li a").click(function(e) {
  e.stopPropagation();
});

Answer 2

尝试使用event.stopPropagation()或event.stopImmediatePropagation()

$("li a").click(function(e) {
  e.stopPropagation();
});

通常我以前使用return false;或event.preventDefault()

执行此操作

最好使用返回false; ，查看原因here

e.preventDefault()将阻止发生默认事件， e.stopPropagation()会阻止事件冒泡 return false 会做到这两点。

来自您的fidde，没有必要为li和a提供2个功能。

你已经喜欢这个

<ul id="some_list">
    <li> <a href="/remote-path" data-remote="true">Some link</a>
    </li>
</ul>

这里似乎 li == a ，所以为什么你想要2个不同的功能。

尝试这样做并检查JSFiddle以了解原因。

<ul id="some_list">
    <li>
        <a href="/remote-path" data-remote="true">Some link</a>Text apart from a
    </li>
</ul>

jQuery中冒泡的事件

2 个答案: