Предотвращать запуск событий для перекрытия элементов HTML

Итак, у меня есть два элемента: один вложен в другой

<div id="outer">
    <div id="inner">
         <p>Lorem Ipsum</p>
    </div>
</div>

Внешний контейнер больше, чем внутренний, с использованием модального наложения. Я хочу зарегистрировать событие щелчка на открытой поверхности внешнего элемента, что приведет к тому, что оба будут уволены, но я не хочу, чтобы это произошло, если вы нажмете на внутренний div.

Я использую делегат jQuery/stopPropagation и пытаюсь опросить элемент, чтобы обеспечить его внешний div, но безрезультатно - он все равно получает внешнее событие. Я рассматриваю возможность проворачивания вручную в области хитов за пределами внутреннего div, но я хочу знать, есть ли более элегантная альтернатива.

EDIT:

несколько хороших решений, размещенных здесь - большое спасибо за отзыв!

Ответ 1

$("#inner").click(function(event){
  event.stopPropagation();
  // do something
});

вот скрипка: http://jsfiddle.net/sajjansarkar/fA2sd/1/

Ответ 2

$('#outer').on('click', function (e) {
    if ( e.target != this) return;
    // run your code here...
});

Здесь скрипка: http://jsfiddle.net/9sLCx/

Ответ 3

Объект события как два свойства, которые помогут вам выполнить эту задачу:

event.currentTarget идентифицирует текущую цель для события, поскольку событие пересекает DOM. Он всегда относится к элементу, к которому привязан обработчик событий, а не к event.target, который идентифицирует элемент, на котором произошло событие. Уведомление о событии будет проходить для внешнего div два раза, сначала в фазе захвата, а затем в фазе барботажа, посередине, если вы создадите обработчик во внутреннем div, он будет уведомлен. Вы можете остановить распространение, когда захотите.

http://fiddle.jshell.net/hmariod/dvV4E/

document.getElementById("outer").addEventListener('click',etvFn,true);
document.getElementById("outer").addEventListener('click',etvFn,false);
document.getElementById("inner").addEventListener('click',etvFn,true);
document.getElementById("inner").addEventListener('click',etvFn,false);
document.getElementById("innerP").addEventListener('click',etvFn);

function etvFn(evt){
    var phase;
    if(evt.eventPhase === 1){
        phase = "Capture";
    }else if(evt.eventPhase === 2){
        phase = "Target";
    }else{
        phase = "Bubbling";
    }
    alert("Target:" + evt.target.id + "\nCurrent Target:" + evt.currentTarget.id + "\nPhase:" + phase);
}