Question

在上面的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事件，同时防止内部div发生反应使用event.stopPropagation()进行mousedown事件，如下所示：

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

<强> Update Fiddle Here

我希望这有帮助！

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

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

3 个答案: