jquery點擊錨內部div區分兩者

Question

我的問題是如何區分一個點擊的錨點和點擊div其中這個錨點是在一個div。

<div class='box'>Message goes here and this is my anchor <a href="#"> my link</a></div> 
<div class='output'></div> 



$(".box").click(function(){ 
     $('.output').append('box clicked!'); 
    }); 

    $(".box > a").click(function(){ 
     $('.output').append('anchor clicked!'); 
    }); 

所以，我想要「錨點擊」沒有「框點擊」。這可能嗎？ 看看這jsfiddle瞭解我的疑問：JSFiddle

Answer 1

當一個事件發生時，它通過DOM上升。你必須停止傳播：

event.stopPropagation() 

Answer 2

$(".box > a").click(function(e) { 
    e.stopPropagation(); 
    $('.output').append('anchor clicked!'); 
}); 

.stopPropagation()防止您的活動從通過DOM冒泡。

Updated fiddle

Answer 3

工作小提琴-->http://jsfiddle.net/x7bmn/2/

使用event.stopPropagation();到冒泡的div

$(".box").click(function(){ 
     $('.output').append('box clicked!'); 
}); 

$(".box > a").click(function(event){ 
    event.stopPropagation(); 
    $('.output').append('anchor clicked!'); 
}); 

Answer 4

試試這個阻止它，

http://jsfiddle.net/x7bmn/1/

$(".box > a").click(function(e){ 
    e.stopPropagation(); 
    $('.output').append('anchor clicked!'); 
    // goal:applies B without applying A 
}); 

Answer 5

我發現了另一種方法，它對我的​​應用程序更有用。使用event.target。

這裏是我的sollution：

$(".box").click(function(e){ 
    if($(e.target).is('a')) 
    $('.output').append('anchor clicked!'); 
    // only applies B 
    else 
     $('.output').append('box clicked!'); 
    // applies A 
}); 

感謝您的及時答覆。

就拿我JsFiddle