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'); } });
如果.inner具有子元素,则上述方法不起作用,对于这种情况,您可以使用最接近的方法:
$(document).mousedown(function(e) { if ( !$(e.target).closest('.inner').length ) { alert('clicked outside of .inner'); } });