Javascript 如何完全禁用任何鼠标点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8595909/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to completely DISABLE any MOUSE CLICK
提问by Omar
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).
在用户点击....“登录”按钮和其他事件后，我制作了一个加载脚本 - 让用户知道他们必须等待（直到 ajax 回复）。
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
我如何可以禁用任何鼠标点击（右键单击，左键单击，双击，中键单击，X点击），上div id="doc"？
我想将该代码添加到loading.js
HTML
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
加载.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
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
采纳答案by Ry-
You can overlay a big, semi-transparent <div>that takes all the clicks. Just append a new <div>to <body>with this style:
你可以覆盖一个大的、半透明的<div>，它会接受所有的点击。只需添加一个新的<div>以<body>这种风格：
.overlay {
background-color: rgba(1, 1, 1, 0.7);
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
}
回答by Leonardo Salles
You can add a simple css3 rule in the body or in specific div, use pointer-events: none;property.
您可以在正文或特定 div 中添加简单的 css3 规则，使用pointer-events: none;属性。
回答by Charles Ma
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');
回答by alonisser
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();
回答by gilly3
The easiest way to freeze the UI would be to make the AJAX call synchronous.
冻结 UI 的最简单方法是使 AJAX 调用同步。
Usually synchronous AJAX calls defeat the purpose of using AJAX because it freezes the UI, but if you wantto prevent the user from interacting with the UI, then do it.
通常同步 AJAX 调用违背了使用 AJAX 的目的，因为它冻结了 UI，但是如果您想阻止用户与 UI 交互，那就去做吧。
