Question

如何触发点击子元素而不让点击事件冒泡到父级＆amp;从而创建一个无限的点击事件触发循环。

例如我喜欢这个：

<li>
   <a> ... </a>
</li>

我希望只要点击a就触发li上的点击事件，但为了防止无限触发循环，我应该避免事件传播到父级。我该怎么做？

Answer 1

这样的东西？

$('li').on('click','a', function(e) {
    e.stopPropagation();

    // your code here...
});

Answer 2

在事件回调中使用event.stopPropagation()()。

$('selector').click(function(event){
  event.stopPropagation()();    
})

Answer 3

通过在锚点上使用.stopPropagation()，您可以停止冒泡。你应该可以使用类似的东西：

$('a').click(function (e) {
    e.stopPropagation();
    console.log('link');
});
$('li').click(function () {
    $('a').click();
});

<强> jsFiddle example

Answer 4

您没有准确说明链接上的点击所需的行为，但如果您只想停止处理点击，请在点击的事件参数上使用preventDefault（）：

$('li').on('click','a', function(e) {
    e.preventDefault();
});

如果您只是想让父母看到事件，请使用stopPropagation（）代替：

$('li').on('click','a', function(e) {
    e.stopPropagation();
});

另一个选项是return false，它与 preventDefault()和stopPropagation()

相同
$('li').on('click','a', function(e) { return false; });

Answer 5

在父级单击处理程序上解析标记名称。（您也可以查看类名称或ID，以及其他事件过滤器。）如果检测到所需的子标记，则停止传播并返回true，以便运行此事件。如果未检测到所需的子标记，则阻止默认事件并返回false。因此，在LI上单击将触发对A的单击，而不会发生失控事件循环，而在A上单击也会在没有失控事件循环的情况下正常进行。另请注意，您不能仅在代码上触发.click()事件。您需要使用[0].click()将其发送到本地DOM元素中，如下所示。

$('LI').click(function(e){
  var sTag = e.target.tagName.toUpperCase();
  if (sTag == 'A') {
    console.log('DEBUG: A click');
    e.stopImmediatePropagation();
    return true;
  } else {
    console.log('DEBUG: ' + sTag + ' click');
    e.preventDefault();
    // the following won't work without the [0]
    $(this).find('A')[0].click();
    return false;
});

触发单击子项但阻止事件传播到父项

5 个答案: