1

我不确定应该如何解决 jQuery 中的以下事件冒泡情况。

我在列表元素 (li) 中有一个链接，它有一个点击事件。我想对 li 元素进行操作，如果用户单击列表元素内的链接，它将调用链接事件（单击）并在 li 上调用操作（当单击 li 或内部的任何内容时，我总是想在 li 上触发单击事件）。

我应该如何做到这一点？

这是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');
});

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

感谢帮助！

4

2 回答 2

4

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

event.stopPropagation()

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

和实施：

$("li a").click(function(e) {
  e.stopPropagation();
});
于 2013-08-31T10:22:46.680 回答
1

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

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

通常我过去常常使用return false;或event.preventDefault()

最好使用return false；，在这里查看原因

e.preventDefault()将防止默认事件发生， e.stopPropagation()将防止事件冒泡， return false并将两者兼而有之。

从您的意见来看，没有必要为li和提供 2 个函数a。

你已经有了这样的

<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>
于 2013-08-31T10:25:37.687 回答