chụp nhấp chuột bên ngoài của một div vị trí tuyệt đối

Question

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

Trong jsfiddle trên, chúng tôi đang cố gắng để nắm bắt khi người dùng nhấp chuột bên ngoài của div .inner nhưng tôi dường như không thể có được nó làm việc.

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 var trong mã của bạn đề cập đến phần tử .inner, vì vậy nó không có phần tử con .inner. Dựa trên cấu trúc đánh dấu, phương pháp has không hữu ích ở đây. Bạn có thể sử dụng phương pháp is:

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

http://jsfiddle.net/MJmPF/

Phương pháp trên không hoạt động nếu .inner có yếu tố trẻ em, đối với trường hợp này, bạn có thể sử dụng phương pháp closest:

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

http://jsfiddle.net/wHpa8/

Answer 2

Bạn có thể sử dụng jQuery $.on()/$.bind() (de cấp phát trên phiên bản jQuery của bạn) để lắng nghe cho sự kiện mousedown trên ngoài div trong khi ngăn chặn các div bên trong từ phản ứng với các sự kiện mousedown sử dụng event.stopPropagation() như vậy:

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

Update Fiddle Here

Tôi hy vọng điều này sẽ giúp !

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