如何完全禁用任何鼠标单击
Posted
技术标签:
【中文标题】如何完全禁用任何鼠标单击【英文标题】：How to completely DISABLE any MOUSE CLICK 【发布时间】：2012-01-25 14:59:04 【问题描述】：在用户点击....“登录”按钮和其他事件后，我制作了一个加载脚本 - 让用户知道他们必须等待（直到 ajax 回复）。
如何在div id="doc" 上禁用任何鼠标点击（右键单击、左键单击、双击、中键单击、x 单击）？
我想将该代码添加到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
【问题讨论】：
@alonisser 我正在使用 charles-ma 和 minitech 解决方案。不幸的是，我这个网站不允许 2-votes >_ 【参考方案1】：您可以在 body 或特定 div 中添加简单的 css3 规则，使用 pointer-events: none; 属性。
【讨论】：
这个解决方案很棒，很简单 还禁用所有光标事件，例如更改指针。似乎只推荐用于 SVG 应用程序。 天才。我一直在寻找几个小时的解决方案 - 这是迄今为止最实用和最简单的解决方案。【参考方案2】：您可以覆盖一个大的、半透明的<div>，它会接受所有点击。只需使用这种样式将新的<div> 附加到<body>：
.overlay
background-color: rgba(1, 1, 1, 0.7);
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
【讨论】：
如何将loading.jpg（$("#loading")）添加到这个div的最中心（.overlay）-屏幕中心？
@Omar: background-image: url('loading.jpg'); background-repeat: no-repeat; background-position: center center; 是一种方式。另一种方法是在.overlay 上添加text-align: center;，然后在.overlay 中添加一个新图像（#loading），样式为margin-top: 50%; position: relative; top: -(half-image's-height)px。
给loading.jpg一个顶部和左侧分别等于parent.height()/2-loading.height()/2和parent.width()/2-loading.width()/2
@minitech background-position: center center; 和 text-align: center... 有什么区别吗？
@minitech 它也自动与窗口的调整大小变化对齐......邪恶！这是最终的 Fiddle（我添加了一些角色自定义）jsfiddle.net/jJ85P【参考方案3】：
禁用所有鼠标点击
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;
);
再次启用它：
$(document).unbind('click');
$(document).unbind('contextmenu');
【讨论】：
我不知道您可以禁用对整个文档的点击！我想我毕竟不需要<div id="doc"> =)
这不会禁用中键。此外，在文档级别设置的事件处理程序将在 事件从实际元素中冒出之后被调用。 （在它已经传播到顶部之后，您正在调用 stopPropagation()。）jsfiddle.net/WWx9B
你说得对，绑定到文档下方元素的 JS 处理程序仍然会触发，但它确实会阻止链接导航和表单提交等 html 可点击事件。它也不会禁用中间点击，而且我不知道禁用它的跨浏览器方式。但是 OP 可能可以使用我的方法和@minitec 描述的 css 覆盖来实现他想要的
@charles-ma 我猜你是对的！混合方法是更好的选择。
@charles-ma 即使有了这段代码，它仍然在点击 IE8：jsfiddle.net/f7xFy/3【参考方案4】：
类似：
$('#doc').click(function(e)
e.preventDefault()
e.stopImmediatePropagation() //charles ma is right about that, but stopPropagation isn't also needed
);
应该做的工作 您还可以通过替换来绑定更多鼠标事件： 编辑： 在feezing部分添加这个
$('#doc').bind('click mousedown dblclick',function(e)
e.preventDefault()
e.stopImmediatePropagation()
);
这个在解冻中：
$('#doc').unbind();
【讨论】：
我是初学者，能详细点吗？【参考方案5】：冻结 UI 的最简单方法是使 AJAX 调用同步。
通常同步 AJAX 调用会破坏使用 AJAX 的目的，因为它会冻结 UI，但如果您想要阻止用户与 UI 交互，那就这样做吧。
【讨论】：
+1 好主意 :) 虽然，如果用户沮丧地按下一堆键，他们不会在完成后都回来吗？ @gilly3 我不知道你在说什么 :,( 这对我来说听起来很乱（太高级了）以上是关于如何完全禁用任何鼠标单击的主要内容，如果未能解决你的问题，请参考以下文章