如何響應容器的點擊事件？

Question

說我有個帶2個鏈接列表項：

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

如果用戶點擊「富」，我想給用戶發送到foo.htm。如果用戶點擊<li>的任何部分或「酒吧」，我想將用戶發送到bar.htm。我擔心，如果我將點擊事件監聽器附加到<li>，點擊「Foo」會將用戶發送到bar.htm。

Answer 1

您是否嘗試過使用event.stopPropagation（）

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

Answer 2

下面的代碼應該解決您的問題。

$("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 3

你必須在兩個Foo和酒吧的處理程序使用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'); 
});​ 

Answer 4

就像這樣。 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"; 
    } 
});