Question

假设我有一个包含2个链接的列表项：

<li>
   <a href="foo.htm">Foo</a>
   <a href="bar.htm">Bar</a>
</li>

如果用户点击“Foo”，我想将用户发送到foo.htm。如果用户点击<li>或“栏”的任何部分，我想将用户发送到bar.htm。我担心如果我将点击事件监听器附加到<li>点击“Foo”会将用户发送到bar.htm。

Answer 1

您是否尝试过使用event.stopPropagation（）

$("a[href='foo.html']").click(function (event) {
    event.stopPropagation()
});

Answer 2

像这样的东西。不应该需要stopPropagation，因为据我所知你想要链接到达指定的位置。

$("li").click(function(e){
    //just in case the click on li is processed before link click
    if($("a[href='foo.html']").is(e.target)){
        window.location.href = "foo.html";
    }
    else {
        window.location.href = "bar.html";
    }
});

Answer 3

以下代码可以解决您的问题。

$("li").click(function (e) {
            if(e.target.nodeName == "A" && e.target.href.indexOf("foo.html") !== -1){
                //send foo.html
            }
            event.stopPropagation();
            // send bar.html
           return false.
        });

Answer 4

您必须在Foo和Bar的处理程序上使用event.stopPropagation()，请参阅有效的解决方案here

为方便起见，在此处粘贴jsfiddle代码：

HTML：

<li id="l1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   <a href="http://www.google.es/q=foo" id="foo">Foo</a>
   <a href="http://www.google.es/q=bar" id="bar">Bar</a>
</li>

JAVASCRIPT：

$('#foo').bind('click',function(event) {
    event.stopPropagation();
});
$('#bar').bind('click',function(event) {
    event.stopPropagation();
});
$('#l1').bind('click',function() {
    window.location.href = $('#bar').attr('href');
});

如何回应容器的点击事件？

4 个答案: