Question

更新：这在最新版本的firefox（15.0.1）中不起作用： http://jsfiddle.net/DerNalia/NdrNV/5/

点击复选框导航到谷歌...但它不应该:(

似乎添加e.stopPropagation（）无效/无效。

playarea：http://jsfiddle.net/DerNalia/NdrNV/1/

我正在尝试做什么：当我单击锚点旁边的（但实际上是子元素）的复选框时，它应该更改状态，还会更改“其他”复选框的状态。

但是因为锚调用了e.preventDefault（），所以永远不会检查复选框。

这是我的标记

<a href="#">Link Name <input class="home" type="checkbox"/></a>
<br />
Sync'd checkbox: <input class="other" type="checkbox" />

这是一些陷入困境的jquery

$(function() {
    $("input.home").click(function() {
        $("input.other").click();
    });

    $("a").click(function(e) {
        e.preventDefault();
        // prevent default so we can do some ajaxy things instead of follow the href
    });
})

那么，我如何更改锚标记上的jQuery点击操作，以便点击传播到子元素（但是我仍然可以在没有浏览器跟踪锚标记的href的情况下执行ajaxy操作）？

有没有办法在不更改标记的情况下执行此操作？（它现在的方式使我的Web应用程序具有语义意义）

Answer 1

您可以像这样放置条件e.target.tagName，

 if(e.target.tagName == 'A')        
       e.preventDefault();

<强> Live Demo

$(function() {
    $("input.home").click(function() {
        $("input.other").click();
    });

    $("a").click(function(e) {
        if(e.target.tagName == 'A')        
           e.preventDefault();      


        // prevent default so we can do some ajaxy things instead of follow the href
    });
})

Answer 2

它不起作用，因为event.preventDefault会取消该事件。

使用e.preventDefault单击checkbox包含在<a>内的e.preventDefault将不允许您更改复选框状态。

我能想到的解决方法是在不同的上下文中设置复选框状态，以使$(function() { $("input.home").click(function() { $("input.other").click(); }); $("a").click(function(e) { e.preventDefault(); var setCheckbox = function() { var checkbox = $(e.target)[0]; checkbox.checked = checkbox.checked?false:true; } if ($(e.target).is(':checkbox')) { setTimeout(setCheckbox, 0); } }); })代码无效。

DEMO： http://jsfiddle.net/NdrNV/10/

{{1}}

注意：这是一种解决方法。

Answer 3

$(function() {
        $("input.home").click(function() {
            if($(this).attr('checked') == 'checked')
                $(this).removeAttr('checked');
            else                               
                $(this).attr('checked', 'checked');
            $("input.other").click();
        });

    $("a").click(function(e) {
        e.preventDefault();
        // prevent default so we can do some ajaxy things instead of follow the href

        var target = e.target; // object that triggers the event
        $(target).children().trigger('click');
    });
});

如果父元素具有preventDefault，如何将单击传播到子元素？

3 个答案: