Disable mouse click when out of div

Question

Hi i have a div of a form. i want that disable click event when mouse is out of the div. So i tried this but it is not working ot of div is still clickable. Any idea??

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

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

Answer 1

You cannot prevent the click event being fired from the whole document. You can do it per element basis. You can probably block the whole screen using a absolute positioned transparent(low opacity) div and hide it again once the div is visible.

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