verhindern Ereignisse für HTML-Elemente überlappende Brennen

Question

Also, ich habe zwei Elemente erhalten, ein

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

Der äußeree Behälter innerhalb der anderen

verschachtelt ist größer als die innere, ein modales Overlay-Layout zu bewirken. Ich möchte ein Klickereignis auf der exponierten Oberfläche des äußeren Bereichs registrieren, was dazu führt, dass beide ignoriert werden, aber ich möchte nicht, dass dies auftritt, wenn Sie auf das innere Teil klicken.

Ich benutze jQuery Delegate/stopPropagation, und versuchen, das Element abzufragen, um sicherzustellen, dass es das äußere div ist, aber ohne Erfolg - es erhält immer noch das äußere Ereignis. Ich überlege, Handkurbeln in einem Trefferbereich außerhalb des inneren Divs durchzuführen, aber ich möchte wissen, ob es eine elegantere Alternative gibt.

EDIT:

mehr gute Lösungen hier geschrieben - vielen Dank für Feedback!

Answer 1

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

hier eine Geige: http://jsfiddle.net/sajjansarkar/fA2sd/1/

Answer 2

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

Hier ist die Geige: http://jsfiddle.net/9sLCx/

Answer 3

Das Ereignisobjekt als zwei Eigenschaften, die Sie für diese Aufgabe helfen:

event.currentTarget Gibt das aktuelle Ziel für das Ereignis an, wenn das Ereignis das DOM durchläuft. Es bezieht sich immer auf das Element, an das der Ereignishandler angehängt wurde, im Gegensatz zu event.target, das das Element identifiziert, auf dem das Ereignis aufgetreten ist. Die Ereignisbenachrichtigung wird für das äußere div zwei Mal übergeben, zuerst in der Erfassungsphase und später in der Bubbling-Phase, in der Mitte, wenn Sie einen Handler im inneren div instanziieren, der benachrichtigt wird. Sie können die Weitergabe stoppen, wenn Sie möchten.

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