logo标签列表

如何完全禁用任何鼠标点击

javascriptjqueryonclickmouseevent
51

当用户点击“登录”按钮和其他事件后，我编写了一个加载脚本 - 让用户知道他们需要等待（直到ajax回复）。

如何在 id="doc" 的 div 上禁用任何鼠标点击（右键、左键、双击、中键、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

->



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
1
@alonisser 我同时使用Charles-Ma和Minitech Solutions。不幸的是，这个网站不允许2个投票 >_< - Omar
5个回答
77
您可以在body或特定div中添加一条简单的CSS3规则，使用pointer-events: none;属性。
3
这个解决方案太棒了，非常简单。 - WtFudgE
同时禁用所有光标事件，例如更改指针。似乎仅建议用于SVG应用程序。 - Dominic Cerisano
1
天才。我已经搜索了几个小时的解决方案 - 这是迄今为止最实用和简单的一个。 - Àtishking
45

你可以叠加一个大的、半透明的<div>，覆盖在所有元素之上，从而阻止所有点击事件。只需向<body>追加一个新的<div>并添加以下样式：

.overlay {
    background-color: rgba(1, 1, 1, 0.7);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}
4
@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。 - Ry-
1
@minitech 它还可以自动对齐窗口大小调整...太棒了!!! 这是最终的 Fiddle（我添加了一些个性化定制）http://jsfiddle.net/jJ85P/ - Omar
@AdrienBe：我刚刚更新了Omar上面链接的fiddle。我真的不记得这整件事是关于什么了... - Ry-
我们该如何让它在IE8中正常工作，因为它不支持rgba背景颜色的alpha属性？ - Tarun
将其设置为不透明的背景颜色，并使用“opacity”属性。 - Ry-
显示剩余17条评论
22
禁用所有鼠标点击
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');
5
这不会禁用中键点击。此外，设置在文档级别的事件处理程序将在事件从实际元素冒泡到文档级别之后调用。（在事件已经冒泡到顶部后调用stopPropagation()。）http://jsfiddle.net/WWx9B/ - nnnnnn
1
你是对的，绑定在文档以下元素上的JS处理程序仍然会触发，但它确实阻止了HTML可点击事件，如链接导航和表单提交。它也不会禁用中键单击，我不知道有没有跨浏览器的方法来禁用它。但是，楼主可能可以使用我的方法和@minitec描述的CSS覆盖来实现他想要的效果。 - Charles Ma
1
@charles-ma 我想你是对的！混合方法是更好的选择。 - Omar
@Omar 请查看 https://dev59.com/SW435IYBdhLWcg3wohpT - Adriano
哎呀，我提供的实时示例中有一个小错误。请查看正确的链接：http://jsbin.com/picewamajufo/1/edit?html,css,js,output - Adriano
显示剩余6条评论
8

something like:

    $('#doc').click(function(e){
       e.preventDefault()
       e.stopImmediatePropagation() //charles ma is right about that, but stopPropagation isn't also needed
});

应该可以完成任务。 你还可以用替换来绑定更多的鼠标事件： 编辑： 在冻结部分添加以下内容。

    $('#doc').bind('click mousedown dblclick',function(e){
       e.preventDefault()
       e.stopImmediatePropagation()
});

并且在解冻过程中需要注意以下事项：

  $('#doc').unbind();
我是一个初学者，您能否详细解释一下？ - Omar
1

冻结用户界面最简单的方法是将AJAX调用设置为同步。

通常，同步的AJAX调用会破坏使用AJAX的目的，因为它会冻结用户界面，但如果您想要防止用户与界面交互，那就这样做吧。

2
+1 好主意 :) 不过，如果用户因为沮丧而按下一堆键，等操作完成后不是所有的键都会回来吗？ - Ry-
1
@gilly3 我完全不知道你在说什么，听起来像胡言乱语（太高级了）。 - Omar
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接