5

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

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

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

4

3 回答 3

3

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

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

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

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

于 2012-07-06T14:21:02.343 回答
2

我想你不能阻止这一点：

来自MDN：

嵌套元素中的单击事件

从 Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5) 开始，冒泡点击事件最多触发一次<label>，合成点击事件不能触发额外<label>的 s。在 Gecko 中，点击事件仍然会冒泡过去<label>，而在 WebKit 或 Internet Explorer 中，点击事件将在<label>. Gecko 8.0 之前的行为（触发多个<label>s）导致 Firefox 停止响应（请参阅错误 646157）。

于 2012-07-06T14:16:41.760 回答
2

http://jsfiddle.net/3M6WE/10/怎么样？通过删除href='#'.

于 2012-07-06T14:19:55.583 回答