带有事件的嵌套元素[重复]

Question

我有一个像这样的元素，

<div class='outer'>
    <div class='inner'></div>
</div>

我在这个 DOM 元素上有 2 个事件，

$('.outer').click(function(e){
    console.log("outer has been triggered");
});

$('.inner').click(function(e){
    console.log("inner has been triggered");
});

现在，如果单击.outer 我在控制台中得到“外部已被触发”，如果我单击.inner 我得到“外部已被触发”和“内部已被触发”，有没有办法仅在内部单击时触发内部事件并将其嵌套在外部 div 中？

这是一个例子，http://jsbin.com/bewukakakuju/2/edit

Answer 1

$('.inner').click(function(e){
    console.log("inner has been triggered");
    e.stopPropagation();
});