prevenire eventi sparare per sovrapposizione di elementi HTML

Question

Così, ho due elementi, uno nidificata all'interno dell'altra

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

Il contenitore esterno è più grande di quello interno, effettuando un layout sovrapposizione modale. Voglio registrare un evento click sulla superficie esposta dell'esterno che farà sì che entrambi vengano ignorati, ma non voglio che ciò accada se clicchi sul div interno.

Sto usando jQuery delegate/stopPropagation e sto provando a interrogare l'elemento per assicurarmi che sia il div esterno, ma senza risultati - riceve ancora l'evento esterno. Sto considerando di girare a mano in un'area di successo al di fuori del div interno, ma voglio sapere se c'è un'alternativa più elegante.

EDIT:

diverse buone soluzioni postato qui - molte grazie per il feedback!

Answer 1

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

ecco un violino: http://jsfiddle.net/sajjansarkar/fA2sd/1/

Answer 2

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

Ecco il violino: http://jsfiddle.net/9sLCx/

Answer 3

L'oggetto evento come due proprietà che vi aiuteranno per questo compito:

event.currentTarget identifica il target corrente per l'evento, poiché l'evento attraversa il DOM. Fa sempre riferimento all'elemento a cui è collegato il gestore eventi anziché a event.target che identifica l'elemento su cui si è verificato l'evento. La notifica dell'evento passerà per il div esterno due volte, prima nella fase di cattura e successivamente nella fase di bubbling, nel mezzo se istanziate un gestore nel div interno verrà notificato. Puoi interrompere la propagazione quando vuoi.

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