捕获绝对定位div之外的单击

Question

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

在上面的jsfiddle中,我试图捕获当用户点击.inner div之外,但我似乎无法让它工作.

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代码中的变量引用该.inner元素，因此它没有.inner子元素。基于标记的结构，has方法在这里没有用处。您可以使用is方法：

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

http://jsfiddle.net/MJmPF/

如果有子元素，上述方法不起作用.inner，对于这种情况，您可以使用closest方法：

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

http://jsfiddle.net/wHpa8/