如何部分防止Default（）？答案

【问题标题】：How to partly preventDefault()?如何部分防止Default（）？
【发布时间】：2012-07-06 14:10:31
【问题描述】：

有一个<label>，里面有一个<a href="#"> 元素。我想阻止<a> 元素的默认行为（即导航），但它应该执行<label> 元素的默认行为（即选中其中的复选框）。 p>

测试用例：http://jsfiddle.net/3M6WE/。单击foo 可切换复选框。单击bar 不会导航，但也不会切换复选框。

我怎样才能让<a> 元素不导航但有它切换复选框？我想避免像手动切换复选框这样的黑客行为。我正在寻找“部分”preventDefault，如果有的话。

【问题讨论】：

将<a> 放入<label> 似乎有点奇怪。
如果点击 'foo' 完全一样，链接有什么用？
同意@Pointy，那<a>的目的是什么？
好点，我减的太多了。我的真实应用程序中的链接在内部切换<div>，允许用户输入有关选中选项的更多详细信息。
为什么不直接使用 span 而不是 <a> ？

标签： javascript jquery google-chrome preventdefault

【解决方案1】：

你可以触发父元素（标签）的点击：

http://jsfiddle.net/3M6WE/11/

$("a").on("click", function(e) {
    e.stopPropagation();
    $(this).parent().click();
    // do stuff...
    e.preventDefault();
});

然后做一些魔术，最后调用 preventDefault();

【讨论】：

这是可行的。一个快速的后续问题 - 您是否知道为什么在 jsfiddle.net/3M6WE/5 中单击“foo”会触发标签单击处理程序两次？
@pimvdb 事件仍在冒泡到标签，但一键阻止默认行为。
@pimvdb，这是因为原始的、默认阻止的事件仍然在 DOM 树中冒泡。在触发新事件之前对原始事件调用 stopPropagation() 应该可以修复它。
@Frédéric Hamidi：但单击复选框不会。我错过了什么吗？
@pimvdb 正在谈论的问题是，当您单击 label 时（not 在 a 上，而 not 在input)，事件处理程序执行两次（控制台中有两条消息）。添加stopPropagation 并不能阻止这一点。

【解决方案2】：

我想你无法阻止这一点：

来自MDN：

嵌套元素中的点击事件

从 Gecko 8.0 开始（Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5)，冒泡点击事件最多触发一个<label>，合成点击事件不能触发额外的<label>s。在 Gecko 中，在 WebKit 或 Internet Explorer 的单击事件将在<label> 处停止。这 Gecko 8.0 之前的行为（触发多个<label>s）导致 Firefox 停止响应（请参阅bug 646157）。

【讨论】：

【解决方案3】：

http://jsfiddle.net/3M6WE/10/ 怎么样？通过删除href='#' 来简化您的问题。

【讨论】：

现在没有链接，也没有链接点击事件。
类似的作品，但仍然是例如允许选择链接文本。但这是一个可行的解决方案，所以+1。