How to completely DISABLE any MOUSE CLICK

javascript jquery onclick mouseevent

119,896

Solution 1

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

Solution 2

You can add a simple css3 rule in the body or in specific div, use pointer-events: none; property.

Solution 3

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

Solution 4

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

Solution 5

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.

View more solutions

119,896

Omar

I use SQL, MySQL, Oracle, php, javascript, Apache's httpd.conf VARIABLES and jQuery

Updated on December 31, 2020

Comments

Omar over 3 years

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

Omar over 12 years

@alonisser I am using BOTH charles-ma and minitech solutions. Unfortunately I this website won't allow 2-votes >_<

Omar over 12 years

how can I add loading.jpg ( $("#loading") )at the very center of this div (.overlay) -Center of the screen?
Ry- over 12 years

@Omar: background-image: url('loading.jpg'); background-repeat: no-repeat; background-position: center center; would be one way. Another would be to add text-align: center; on .overlay, then add a new image (#loading) in .overlay with the style margin-top: 50%; position: relative; top: -(half-image's-height)px.
Greg Guida over 12 years

give loading.jpg a top and left equal to parent.height()/2-loading.height()/2 and parent.width()/2-loading.width()/2 respectively
Ry- over 12 years

+1 Good idea :) Although, if the user presses a bunch of keys in frustration, won't they all come back after it's done?
Omar over 12 years

I am a beginner, could you please elaborate?
Omar over 12 years

@minitech Is there any difference between background-position: center center; and text-align: center...?
Ry- over 12 years

@Omar: I think the latter is a bit more compatible, but it will degrade gracefully all the same. background-* is a little cleaner in syntax.
Omar over 12 years

I did not know you could disable clicks on the whole document! I guess I do not need <div id="doc"> after all =)
nnnnnn over 12 years

That won't disable middle-clicks. Also, an event handler set at the document level will be called after the event bubbles up from the actual elements. (You're calling stopPropagation() after it has already propagated to the top.) jsfiddle.net/WWx9B
Charles Ma over 12 years

You're right, JS handlers bound to elements below document will still fire, but it does stop html clickable events like link navigation and form submission. it also doesn't disable middle click, and I don't know a cross browser way to disable it. But the OP can probably achieve what he wants using a mix of my approach and a css overlay described by @minitec
Omar over 12 years

@gilly3 I have noooo idea what you are talking about :,( It sounds gibberish to me (too advanced)
Omar over 12 years

@charles-ma I guess you are right! A mixed approach is a better choice.
Omar over 12 years

@minitech I hope it's not too late. I tried this css on Firefox with no problems. However, I also need to make it compatible with IE. I tried several ways with no success.
Omar over 12 years

@minitech This fiddle works fine on Firefox. With the exception that it does not center's properly. However, it does not work on IE8: jsfiddle.net/f7xFy/3
Omar over 12 years

@charles-ma Even with this code, it is still clicking on IE8: jsfiddle.net/f7xFy/3
Charles Ma over 12 years

hm...try returning false from those functions. I don't have IE8 to test right now
Omar over 12 years

@minitech I am not sure what I am doing wrong. The fiddle works just fine on IE, but not when I load the very same code on my client's host http://tiny.cc/7brtd
Ry- over 12 years

@Omar: You're in quirks mode. Add a <!DOCTYPE html>.
Omar over 12 years

@minitech Great! Now to the next problem >_< Why is not centered? Right now is leaning tooooo much to the bottom
Ry- over 12 years

@Omar: Can you update your live web example to add that, please?
Omar over 12 years

@minitech You mean this link: tiny.cc/7brtd? I updated it already (Added <!DOCTYPE...>)
Ry- over 12 years

@Omar: No, the thing that isn't centering.
Omar over 12 years

@minitech ???...The div that is not centered is <div id=loading"... but I am not sure what you want me to update there...
Omar over 12 years

@minitech It auto-aligns with the window's resizing changes too...wicked!!! Here is the final Fiddle (I added some persona customization) jsfiddle.net/jJ85P
Omar over 12 years

??? I am a beginner...what do you mean by returning false? isn't it already returning false...e.stopImmediatePropagation(); return false;?
Omar over 12 years

@minitech the div won't take a white border, but I can compromise =) ...id="stretch' on your fiddle jsfiddle.net/minitech/f7xFy/6, or id=loading_box on my fiddle jsfiddle.net/jJ85P
Adrien Be over 9 years

@minitech why adding the jQuery from "Charles Ma"'s answer when your original answer works without it (hence making the code simpler). see jsbin.com/qixiwuqozive/1/edit?html,css,js,output
Adrien Be over 9 years

@Omar see stackoverflow.com/questions/5302903/…
Adrien Be over 9 years

@CharlesMa although I like your solution (a jQuery approach), why would you use both your solution & the one of "minitec", when just using the one from "minitec" seems to work just fine for all clicks (right, left, middle...). see jsbin.com/nuzezayiliko/1/edit?html,css,js,output
Adrien Be over 9 years

ooops, there was a small mistake in the live example I provided. See the correct one jsbin.com/picewamajufo/1/edit?html,css,js,output
Ry- over 9 years

@AdrienBe: I just updated the fiddle Omar linked above. I don’t really remember what this whole thing is about anymore…
Tarun about 9 years

how can we make it work for IE8 as it doesnot take alpha property of background color in rgba ?
Ry- about 9 years

@tarun_telang: Set it to an opaque background colour and use the opacity property.
Tarun about 9 years

@minitech - opactity attribute is also not supported in IE 8.
Tarun about 9 years

for IE 8 the following CSS code needs to be used. {filter: alpha(opacity=80); opacity: 0.8}
WtFudgE over 8 years

this solution is awesome, so easy
Dominic Cerisano almost 8 years

Also disables all cursor events, like changing the pointer. Seems to be only recommended for SVG applications.
Vaibhav Ahalpara about 6 years

Uncaught ReferenceError: e is not defined
Àtishking over 4 years

Genius. I've been searching for a solution couple of hours - this one is the most practical and easy by far.