jquery - div内的jQuery单击锚区分它们

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

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

.stopPropagation()防止您的事件通过 DOM 冒泡。

更新的小提琴

Answer 2

当一个事件发生时，它会通过 DOM 上升。你必须停止传播：

event.stopPropagation()

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.

这是我的解决方案：

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

感谢您的及时答复。

看看我的JsFiddle