Omar Omar - 1 year ago 76
Javascript Question

How to completley disable any MOUSE CLICK

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 COMPLETE 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


<div id="doc">
<div id="content">
<input type="button" value="Login" id="login" />
</div id="content">
</div id="doc">


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)

return alert("Wrong argument!");


load_bar(1); //DISABLE clicks and show load_bar
$(":input").attr("disabled", true);

load_bar(0); //ENABLE clicks and hide load_bar
} //END: if:else
}); //END:$.post
}); //END:ajax
}); //END:jQuery

Answer Source

You can overlay a big, semi-transparent <div> that takes all the clicks. Just append a new <div> to <body> with this style:

.overlay {
    background-color: rgba(1, 1, 1, 0.7);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;