锚点单击行为中的复选框答案

【问题标题】：Checkbox inside an anchor click behavior锚点单击行为中的复选框
【发布时间】：2011-12-27 00:37:51
【问题描述】：

考虑以下sn-p：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>
    <body>
        <form>
            <a id="a" href="http://google.com">Goooooogle</a>
        </form>
        <script>
            $(function() {
                var checkbox = $('<input type="checkbox"></input>');
                checkbox.prependTo($('#a'));
                checkbox.click(function(e) {
                    e.stopPropagation();
                    // do something useful
                });
            });
        </script>
    </body>
</html>

我想在<a> 中获得一个复选框，并获得以下点击行为：

像往常一样正常切换复选标记
做一些有用的事情，比如 AJAX 请求
留在此页面，即不会被重定向到a href

如果我单击a 中的任意位置，我也不想覆盖默认行为，但不是复选框。 IE。我想允许执行与a click 本身关联的所有事件处理程序。

我认为这应该很容易，但我无法获得所需的行为。要么：

如果我输入提供的代码，我会被重定向到 Google。
如果我使用e.preventDefault() 或return false;，我不会切换复选标记。此外，在这种情况下，复选框会忽略显式 checkbox.attr('checked', 'checked') 和所有其他可能设置复选标记的方式。

问题在哪里？

UPD: 这在 Chrome 中按预期工作，例如我没有在点击时重定向，但在 Firefox 中失败。有跨浏览器的方式吗？

【问题讨论】：

为什么要将复选框放在锚标签内？期望的结果是什么？
这是我必须处理的过于简化的版本。我不能在html中做到这一点。无论如何，它会改变什么吗？
可能还有另一种方法可以实现您想要做的事情。但我们不知道你想做什么
Something like this?
@nailxx 看起来你已经得到了答案

标签： javascript jquery checkbox event-bubbling

【解决方案1】：

这是一个修改后的脚本

var checkbox = $('<input type="checkbox"></input>');
var a = $('#a');
a.unbind("click").click(function(e) {
    e.preventDefault();
    checkbox.attr('checked', !checkbox.attr('checked'));
});
checkbox.prependTo(a);
checkbox.click(function(e) {
    e.stopPropagation();
    // do something useful 
});

我取消绑定<a> 上的点击事件并使用事件重新绑定它以选中/取消选中复选框并防止默认值。

【讨论】：

它与我想要的完全相反：当我点击复选框时它会转到谷歌，但当我点击链接文本时它会抑制重定向。
嗯，这很奇怪。检查这个例子：jsfiddle.net/manuel/Br8jM这有什么问题？
同理：点击复选框，您将被重定向。火狐 Ubuntu 7.0.1
@nailxx 我没有被重定向！

【解决方案2】：

好吧，它看起来像一个已知的Firefox bug，无论处理程序的代码如何，都会导致单击复选框时出现以下链接。作为一个有点肮脏的解决方法，可以使用：

var checkbox = $('<input type="checkbox"></input>');
checkbox.prependTo($('#a'));
checkbox.click(function(e) {
    setTimeout(function() { checkbox.prop('checked', !checkbox.prop('checked')); }, 10);       
    // do something useful on clicking checkbox and but not surrounding link
    return false;
});

【讨论】：

如果这是 Firefox 的 bug，我认为它也是 Chrome 的 bug。我当时有反应，但仍然。

【解决方案3】：

我知道这是一个老问题，但有些人可能仍然好奇，因为如果没有凌乱的破解或解决方法，它从来没有真正得到完全的回答。您所要做的只是检查事件目标的来源。

所以用你的例子（jsfiddle）：

// Don't change pages if the user is just changing the checkbox
$("#a").click(function(e) {
    //e.preventDefault(); // Optional if you want to to keep the link from working normally

    alert("Click came from: " + e.target.tagName);
    if (e.target.tagName != "INPUT") {
        // do link
        alert("Doing link functionality");
    } else {
        // do something useful
        alert("Doing checkbox functionality");
    }
});

【讨论】：

这不起作用 - 点击复选框仍会将您带到 Google。
@Gaz 效果很好。您可以看到它在链接的 jsfiddle 上工作。您是否取消了“如果您想让链接无法正常工作”这行的注释？
抱歉，您似乎是对的。除了满足问题的需要， e.preventDefault() 只需要在“复选框”位中。 jsfiddle.net/YqY3f/8

【解决方案4】：

我知道这个问题已经超过 5 年了，但我最近遇到了同样的问题，我发现的解决方法是在复选框中添加一个 onclick 函数，并在该函数中调用 event.stopImmediatePropagation()。

来自 w3schools：“stopImmediatePropagation() 方法可防止调用同一事件的其他侦听器”

即……锚。

function checkbox_onclick(event){
event.stopImmediatePropagation(); 
}

【讨论】：