Question

请考虑以下代码段：

<!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-request
留在此页面上，即不会被重定向到a href

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

我认为这应该很容易，但我无法获得理想的行为。之一：

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

渔获物在哪里？

UPD：这在Chrome中可以正常运行，例如：我没有在点击时重定向，但在Firefox中失败。有跨浏览器的方式吗？

Answer 1

好吧，它看起来像一个已知的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;
});

Answer 2

我知道这是一个古老的问题，但有些人可能仍然很好奇，因为如果没有混乱的黑客或解决方法，它永远不会真正完全回答。您所要做的就是检查事件目标的来源。

所以使用你的例子（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");
    }
});

Answer 3

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

来自w3schools的

：“stopImmediatePropagation（）方法阻止同一事件的其他侦听器被调用”

即...锚。

1-15...

Answer 4

这是一个经过修改的脚本

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>上的点击事件并使用事件重新绑定它以检查/取消选中该复选框并阻止默认设置。

复选框内的锚点击行为

4 个答案: