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

Question

如何触发子元素的点击，而又不让click事件冒泡至父级，从而创建click事件的无限触发循环。

例如我有这样的：

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

我想触发click事件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示例

Answer 4

您没有确切说明单击链接时想要的行为，但是如果您只想完全停止处理单击，请在click的事件参数上使用preventDefault（）：

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

如果只想停止父级看到事件，请使用stopPropagation（）代替：

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

另一种选择是返回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;
});