复选框在锚链接中的点击行为

Question

复选框在锚链接中的点击行为

7

考虑以下代码片段：

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

我想在标签内放置一个复选框，并获得以下单击行为：

像平常一样切换复选标记

执行一些有用的操作，如 AJAX 请求

停留在当前页面，即不要重定向到

另外，如果我在复选框以外的任何地方点击，我不想覆盖默认行为。也就是说，我希望允许执行与单击本身相关联的所有事件处理程序。

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

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

问题出在哪里？

更新：这在 Chrome 中按预期工作，例如，单击时不会重定向，但在 Firefox 中失败。是否有跨浏览器的方法？

- nkrkv

3

为什么你想把复选框放在锚点标签内？期望得到什么结果？ - Lee Price

这只是我要处理的过于简化的版本。我不能用HTML完成它。无论如何，这会改变什么吗？ - nkrkv

可能有另一种方法实现你想做的事情，但我们不知道你想做什么。 - Lee Price

类似于这样的东西？（http://jsfiddle.net/Shef/eqaG7/）？ - Shef

@nailxx 看起来你已经得到了答案。 - Lee Price

显示剩余2条评论

4个回答

5

我知道这是一个旧问题，但有些人可能仍然感到好奇，因为它从未得到完全的回答，除了一些混乱的hack或解决方法。你需要做的就是简单地检查事件的目标来源。

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

- Lifz

1

这个不起作用 - 点击复选框仍然会带您到Google。 - Gaz

@Gaz 它工作得很好。你可以在链接的jsfiddle上看到它的工作情况。你解除了那行说“如果你想保持链接正常工作”的注释吗？ - Lifz

抱歉，你似乎是正确的。除了满足问题的需求外，e.preventDefault() 只需要在“checkbox”部分中使用。http://jsfiddle.net/YqY3f/8/ - Gaz

@Gaz 那也不行，警告框后复选框又变成未选中状态了。 - vpzomtrrfrt

如果您不想要链接跳转，请将 e.preventDefault() 放到链接功能中。当您单击复选框时，它将被选中。像这样：http://jsfiddle.net/lifz/hmb6po9y/5/ - Lifz

4

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

从w3schools得知：“stopImmediatePropagation()方法可以防止调用相同事件的其他听众”

就像...该锚点。

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

- mayoBull

0

这是一个修改过的脚本

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> 上的点击事件，并重新绑定了一个事件来检查/取消选中复选框，同时阻止默认行为。

- Manuel van Rijn

它完全相反于我想要的：当我点击复选框时，它会跳转到谷歌，但当我点击链接文本时，它却抑制了重定向。 - nkrkv

这很奇怪。看看这个例子：http://jsfiddle.net/manuel/Br8jM/ 这有什么问题吗？ - Manuel van Rijn

相同的操作：勾选复选框即可重定向。Firefox Ubuntu 7.0.1。 - nkrkv

@nailxx 我没有被重定向！ - Shef

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nkrkv · Accepted Answer

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