Jquery在div中单击锚点区分它们

我的问题是如何区分单击的锚和单击的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!'); 
    });

消息传到这里，这是我的锚
$（“.box”）。单击（函数（）{
$（'.output'）.append（'box clicked！'）；
});
$（“.box>a”）。单击（函数（）{
$（'.output'）.append（'anchor clicked！'）；
});

所以，我想得到“锚点击”而不是“框点击”。这可能吗？

---

看看这个jsfiddle来理解我的疑问：

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

event.stopPropagation()

.stopPropagation（）

防止事件在DOM中冒泡

工作小提琴

-->

使用

event.stopPropagation（）

以阻止它冒泡到

div

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

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

试试这个

---

我发现另一种方法对我的应用程序更有用。使用

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
});

谢谢你的及时答复

---

查看我的

你需要在锚点击手柄上停止播放这也会起作用，但是你的点击仍然会在DOM、fwiw上冒泡。

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

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