Vô hiệu hóa nhấp chuột khi ra khỏi div

Question

Xin chào, tôi có một div của một biểu mẫu. tôi muốn rằng sự kiện nhấp chuột vô hiệu hóa khi chuột ra khỏi div. Vì vậy, tôi đã thử điều này nhưng nó không hoạt động ot của div vẫn có thể nhấp. Bất kỳ ý tưởng??

var flag = false; 
$("#foo").live("mouseenter",function(){ 
    flag = true; 
}).live("mouseleave",function(){ 
    flag = false; 
}) 

$(document).click(function(){ 
    if(!flag) 
     return false; 
}); 

Answer 1

Bạn không thể ngăn sự kiện nhấp được kích hoạt từ toàn bộ tài liệu. Bạn có thể làm điều đó trên cơ sở phần tử. Bạn có thể chặn toàn bộ màn hình bằng cách sử dụng vị trí tuyệt đối trong suốt (độ mờ đục thấp) và ẩn nó một lần nữa khi div hiển thị.

var $body = $(document.body); 
var $div = $("<div id='dummyDiv'/>").hide().appendTo($body); 
$div.css({position:"absolute", height: $body.height(), width: $body.width(), background: "#000", opacity: 0.5}).show(100); 

//to hide it 
$("#dummyDiv").hide(100); 

Answer 2

istead của việc sử dụng trở lại sai, sử dụng e.preventDefault http://css-tricks.com/6809-return-false-and-prevent-default/

Answer 3

$("#foo").live("mouseenter",function(){ 
    $(document).bind('click', onDocumentClick); 
}).live("mouseleave",function(){ 
    $(document.unbind('click'); 
}); 

function onDocumentClick(e){ 

}; 

Tôi nghĩ rằng bạn muốn nhấp chuột vào #foo thay vì document, nếu vậy bạn chỉ có thể làm điều này:

$('#foo').click(function(){ 

});

Vì bạn phải được cuộn qua một phần tử để bấm vào nó, nó sẽ hoạt động tốt.