Capturing Klick außerhalb einer absoluten positionierte div

Question

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

In der obigen jsfiddle ich zu erfassen versuchen, wenn der Benutzer außerhalb des .inner div klickt, aber ich kann nicht scheinen, daran zu arbeiten.

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 iable in Ihrem Code bezieht sich auf das .inner Element, so dass es kein .inner Kindelement hat. Basierend auf der Struktur der Markup, has Methode ist hier nicht sinnvoll.

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

http://jsfiddle.net/MJmPF/

Die obige Methode funktioniert nicht, wenn die .inner Kinder Elemente hat, für diesen Fall, dass Sie closest Methode verwenden können: Sie können is Methode verwenden

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

http://jsfiddle.net/wHpa8/

Answer 2

Sie können jQuerys $.on()/$.bind() (de mit event.stopPropagation() wie so anhängiger auf jQuery-Version) für das mousedown Ereignis auf den äußeren div zu hören, während von der Reaktion auf das mousedown Ereignis das innere div verhindern:

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

Update Fiddle Here

Ich hoffe, das hilft !

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