Cattura clic al di fuori di un div assoluta posizionato

Question

http://jsfiddle.net/dgjJe/1/

Nel jsfiddle sopra Sto cercando di catturare quando l'utente fa clic al di fuori del div .inner, ma io non riesco a farlo funzionare.

HTML:

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

Javascript:

$(document).mousedown(function (e) { 
    var div = $(".inner"); 
    if (div.has(e.target).length === 0) { 
     alert('clicked outside of .inner'); 
    } 
}); 

CSS:

.outer { width:200px; height:200px; border:1px solid #000; position:relative; } 
.inner { width:100px; height:100px; border:1px solid #000; position:absolute; top:25px; left:25px; } 

Answer 1

div var responsabile nel codice si riferisce all'elemento .inner, quindi non ha l'elemento figlio .inner. In base alla struttura del markup, il metodo non è utile qui. È possibile utilizzare il metodo is:

$(document).mousedown(function(e) { 
    if (!$(e.target).is('.inner')) { 
     alert('clicked outside of .inner'); 
    } 
}); 

http://jsfiddle.net/MJmPF/

Il metodo di cui sopra non funziona se il .inner ha elementi per bambini, per questo caso è possibile utilizzare il metodo closest:

$(document).mousedown(function(e) { 
    if (!$(e.target).closest('.inner').length) { 
     alert('clicked outside of .inner'); 
    } 
}); 

http://jsfiddle.net/wHpa8/

Answer 2

È possibile utilizzare jQuery's $.on()/$.bind() (de in attesa della versione jQuery) per intercettare l'evento mousedown sul esterno div evitando il div interno di reagire all'evento mousedown utilizzando event.stopPropagation() in questo modo:

$('.inner').on('mousedown', function(e){ 
    e.stopPropagation() 
}); 
$('.outer').on('mousedown', function(){ 
    alert('outer'); 
    return false; 
}); 

Update Fiddle Here

Spero che questo aiuta !

Answer 3

$(document).mousedown(function (e) { 
    var div = $(".inner"); 
    if (!$(e.target).is('.inner') && div.has(e.target).length === 0) { 
     console.log('clicked outside of .inner'); 
    } 
});