Вложенный элемент с событиями

Question

У меня есть элемент, который выглядит так,

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

У меня есть 2 события на этом элементе DOM,

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