Javascript 锚定单击行为中的复选框_Javascript_Jquery_Checkbox_Event Bubbling

Javascript 锚定单击行为中的复选框

javascript jquery checkbox

Javascript 锚定单击行为中的复选框,javascript,jquery,checkbox,event-bubbling,Javascript,Jquery,Checkbox,Event Bubbling,考虑以下代码段： <!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>

考虑以下代码段：

<!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>


$（函数（）{
var复选框=$（''）；
复选框.prependTo（$（'a'））；
复选框。单击（函数（e）{
e、 停止传播（）；
//做些有用的事
});
});

我想在

中获得一个复选框，并在单击时获得以下行为：

像往常一样正常切换复选标记

做一些有用的事情，比如AJAX请求

保持此页面，即不被重定向到

a href

此外，如果我在

中的任何位置单击，但不在复选框上单击，我不希望覆盖默认行为。也就是说，我希望允许执行与

单击本身相关联的所有事件处理程序

我认为这应该很容易，但我不能得到想要的行为。要么：

如果我输入提供的代码，我会被重定向到谷歌

如果我使用

返回false的e.preventDefault（）
，我不会切换复选标记。此外，在这种情况下，复选框会忽略显式的checkbox.attr（'checked'，'checked'）
和所有其他可能的设置复选标记的方法


陷阱在哪里
UPD：这在Chrome中可以正常工作，例如，我不会在点击时重定向，但在Firefox中失败。有跨浏览器的方式吗？
这是一个修改过的脚本
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 
});

var复选框=$（''）；
变量a=$（'a'）；
a、 解除绑定（“单击”）。单击（功能（e）{
e、 预防默认值（）；
checkbox.attr（'checked'），！checkbox.attr（'checked'）；
});
复选框.prependTo（a）；
复选框。单击（函数（e）{
e、 停止传播（）；
//做些有用的事
});

我在
上解除了click事件的绑定，并使用一个事件将其重新绑定，以选中/取消选中复选框，并阻止默认设置。
好吧，它看起来像是一个已知的事件，这会导致以下关于复选框单击的链接，而不管处理程序的代码如何。作为一种有点脏的解决方法，可以使用：
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;
});

var复选框=$（''）；
复选框.prependTo（$（'a'））；
复选框。单击（函数（e）{
setTimeout（函数（）{checkbox.prop（'checked'），！checkbox.prop（'checked'）；}，10）；
//在点击复选框时做一些有用的事情，但不要点击周围的链接
返回false；
});
我知道这是一个老问题，但有些人可能仍然很好奇，因为如果没有一个混乱的破解或解决方法，它从未真正得到完整的回答。你所要做的就是简单地检查事件目标的来源
因此，使用您的示例（）：
我知道这个问题已经问了5年多了，但我最近也遇到了同样的问题，我发现解决方法是在复选框和函数调用事件中添加onclick函数。stopImmediatePropagation（）
来自W3s：“stopImmediatePropagation（）方法防止调用同一事件的其他侦听器”
锚
function checkbox_onclick(event){
event.stopImmediatePropagation(); 
}

为什么要将复选框放在锚标记内？期望的结果是什么？这是我必须处理的一个过于简单的版本。我不能用html来做。在任何情况下，它会改变什么吗？可能有另一种方法来实现你想要做的事情。但是我们不知道你想做什么？@nailxx看起来你已经得到了答案。它与我想要的完全相反：当我点击复选框时它会转到谷歌，但当我点击链接文本时它会抑制重定向。这很奇怪。检查此示例：这有什么问题？相同：单击复选框，您将被重定向。火狐Ubuntu 7.0。1@nailxx我没有被重定向！这不起作用-点击复选框仍然会带你去谷歌。@Gaz效果很好。您可以看到它在链接的JSFIDLE上工作。你是否取消了对“如果你想保持链接正常工作”这句话的注释？抱歉，你似乎是对的。除了满足问题的需要外，e.preventDefault（）只需位于“复选框”位。如果这是一个Firefox bug，我想这也是一个Chrome bug。当时我已经做出了反应，但仍然没有反应。
function checkbox_onclick(event){
event.stopImmediatePropagation(); 
}