After the user clicks on...."log in" button, and other events, I made a loading script -to let users know they have to wait (Until ajax replies back).
How can I DISABLE any MOUSE CLICKS (right click, left click, double click, middle click, x click), on div id="doc"?
I want to add that code to loading.js
HTML
<html>
...
<body>
<div id="doc">
<div id="content">
...
<input type="button" value="Login" id="login" />
...
</div id="content">
</div id="doc">
</body>
</html>
loading.js
function load_bar(x)
{
if (x==0)
{
$(document.body).css( {"cursor": "default"} );
$("body").css( {"cursor": "default"} );
$("#loading").css("visibility", "hidden"); //modal window
// $("#doc").....ENABLE all clicks (left/right/etc)
}
else if (x==1)
{
$(document.body).css( {"cursor": "wait"} );
$("body").css( {"cursor": "wait"} );
$("#loading").css( {"visibility": "visible"} ); //modal window
// $("#doc").....DISABLE all clicks (left/right/etc)
}
else
{
return alert("Wrong argument!");
}
}
jQuery
$(document).ready(function()
{
//AJAX
$("#login").click(function()
{
load_bar(1); //DISABLE clicks and show load_bar
$(":input").attr("disabled", true);
$.post(
...
function(data)
{
...
load_bar(0); //ENABLE clicks and hide load_bar
...
} //END: if:else
}); //END:$.post
...
}); //END:ajax
}); //END:jQuery
This question is related to
javascript
jquery
onclick
mouseevent
The easiest way to freeze the UI would be to make the AJAX call synchronous.
Usually synchronous AJAX calls defeat the purpose of using AJAX because it freezes the UI, but if you want to prevent the user from interacting with the UI, then do it.
something like:
$('#doc').click(function(e){
e.preventDefault()
e.stopImmediatePropagation() //charles ma is right about that, but stopPropagation isn't also needed
});
should do the job you could also bind more mouse events with replacing for: edit: add this in the feezing part
$('#doc').bind('click mousedown dblclick',function(e){
e.preventDefault()
e.stopImmediatePropagation()
});
and this in the unfreezing:
$('#doc').unbind();
To disable all mouse click
var event = $(document).click(function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
// disable right click
$(document).bind('contextmenu', function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
to enable it again:
$(document).unbind('click');
$(document).unbind('contextmenu');
You can add a simple css3 rule in the body or in specific div, use pointer-events: none; property.
Source: Stackoverflow.com