如果单击链接内部的元素,如何防止默认链接行为

How to prevent default link behavior if element inside of link is clicked

本文关键字:链接 何防止 默认 元素 单击 内部 如果      更新时间:2023-09-26

我有一个链接,看起来像这样:

<a href="page.html" class="myLink">
  Link text
  <div class="toggle">x</div>
</a>

当他们点击x时,我想阻止链接导航,但如果他们点击Link Text,我想让链接导航。

我试过了:

$('.toggle').click(function(event) { $(this).parents('a').preventDefault(); });

要停止从单击的元素到外部a的传播,必须调用stopPropagation。但是在这里,您可以简单地返回false(这既可以停止传播,又可以防止默认行为):

$('.toggle').click(function(event) {
    // do interesting things   
    return false
});

需要触发preventDefault()方法的是事件而不是元素。

$('.toggle').click(function (event) { 
    event.preventDefault(); 
});

这将阻止事件触发,但不会在文档中传播。

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

是对应的