jquery - 在绝对定位的 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/

Answer 2

您可以使用 jQuery 的$.on() / $.bind()（取决于您的 jQuery 版本）来侦听mousedown外部事件，div同时防止内部 divmousedown使用event.stopPropagation()对事件做出反应，如下所示：

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

在这里更新小提琴

我希望这有帮助！

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