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

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

解决方法

代码中的div变量引用.inner元素,因此它没有.inner子元素.基于标记的结构,这里的方法没用.你可以使用is方法：

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

http://jsfiddle.net/MJmPF/

如果.inner具有子元素,则上述方法不起作用,对于这种情况,您可以使用最接近的方法：

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

http://jsfiddle.net/wHpa8/