带事件的嵌套元素

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