JQuery Ребенок захватывает клики, хочет только родителя

Скажите, что у меня есть это:

<div id="outer">
 <div id="inner">
 </div>
</div>

Внешние размеры div 500x500, а внутренний - 100x100. Я пытаюсь использовать следующее:

$('#outer').click(function() {
    $('#outer').fadeOut();
});

Но когда вы нажимаете на область 100x100 #inner, она по-прежнему исчезает. Как это предотвратить?

Ответы

Лучше не назначать обработчики кликов для внутренних элементов. В функции щелчка проверьте, что цель события равна внешнему. Что-то вроде

$('#outer').click(function(e) {
    if (e.target.id === "outer"){
        $('#outer').fadeOut();
    }
});

Я понял, что этот код работает лучше и не зависит от знания идентификатора элемента или класса:

$('#outer').click(function(e) {
    if (e.target === this){
        $('#outer').fadeOut();
    }
});

Захват кликов по внутреннему div и остановка его от пузырьков:

$('#inner').click(function(ev) {
  ev.stopPropagation();
});

Это дополнение к вашему выше "внешнему" обработчику кликера.