防止燒事件重疊HTML元素

Question

所以，我有兩個元素，嵌套在其他

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

外容器比內大內的一個，實現覆蓋模式佈局。我想在外面的外露表面上註冊一個點擊事件，這會導致兩者都被解散，但是如果點擊內部div，我不希望發生這種情況。

我使用jQuery委託/ stopPropagation，並試圖詢問元素以確保它是外部div，但無濟於事 - 它仍然接收外部事件。我正在考慮在內部div外的熱門區域進行手搖，但我想知道是否有更優雅的選擇。

編輯：

幾個很好的解決方案張貼在這裏 - 反饋非常感謝！

Answer 1

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

這裏有一個小提琴： http://jsfiddle.net/sajjansarkar/fA2sd/1/

Answer 2

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

這裏的小提琴：http://jsfiddle.net/9sLCx/

Answer 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); 
}​