如何完全禁用任何鼠标单击答案

【问题标题】：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 >_

标签： javascript jquery onclick mouseevent

【解决方案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 我不知道你在说什么 :,( 这对我来说听起来很乱（太高级了）