捕获绝对定位div外部的点击事件

Question

在上面的jsfiddle中，我试图捕获用户点击.inner div之外的区域，但似乎无法使其正常工作。 HTML：

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

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

- Amir

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/

- Ram

Answer 2

你可以使用 jQuery 的 $.on() / $.bind()（取决于你的 jQuery 版本）来监听外部 div 上的 mousedown 事件，同时使用 event.stopPropagation() 阻止内部 div 对 mousedown 事件做出反应，代码如下：

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

在这里更新 Fiddle

希望这有所帮助！

- dSquared

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

- kis