如何在单击链接内部元素时防止默认链接行为

Question

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

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

当他们点击toggle中的x时，我希望阻止链接导航，但是如果他们点击链接文本，我希望链接可以正常导航。

我尝试了下面的代码:

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

但好像没有起作用。

- Talon

---

http://api.jquery.com/event.preventDefault/会告诉你它是事件对象的一个方法，而不是jQuery对象的方法。 - Blazemonger

Answer 1

如果您想阻止点击元素的传播到外部a，则必须调用stopPropagation。但是在这里，您可以简单地返回false（既阻止传播又防止默认行为）：

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

- Denys Séguret

---

值得注意的是，即使存在一个停止所有三个mousedown、click和mouseup事件传播的侦听器，如果mouseup事件上存在侦听器，则似乎无法正常工作。对于mousedown事件，它可以正常工作而没有问题。 - Patrick Dark

Answer 2

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

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

这将停止事件触发，但不会向上传播到文档。

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

它的对应物。

- Mattyod