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

IT技术 javascript jquery onclick mouseevent
2021-01-17 18:02:32

在用户点击....“登录”按钮和其他事件后，我制作了一个加载脚本 - 让用户知道他们必须等待（直到 ajax 回复）。

我如何可以禁用任何鼠标点击（右键单击，左键单击，双击，中键单击，X点击），上div id="doc"？
我想将该代码添加到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>



加载.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
5个回答

您可以在正文或特定 div 中添加简单的 css3 规则，使用pointer-events: none;属性。

还禁用所有光标事件，例如更改指针。似乎只推荐用于 SVG 应用程序。
2021-03-17 18:02:32
天才。我一直在寻找解决方案几个小时 - 这是迄今为止最实用和最简单的解决方案。
2021-03-25 18:02:32
这个解决方案很棒，很简单
2021-03-28 18:02:32

你可以覆盖一个大的、半透明的<div>，它会接受所有的点击。只需添加一个新的<div>以<body>这种风格：

.overlay {
    background-color: rgba(1, 1, 1, 0.7);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}
给出loading.jpg一个 top 和 left分别等于parent.height()/2-loading.height()/2和parent.width()/2-loading.width()/2
2021-03-25 18:02:32
@奥马尔：background-image: url('loading.jpg'); background-repeat: no-repeat; background-position: center center;将是一种方式。另一种是添加text-align: center;上.overlay，然后添加一个新的图像（#loading）中.overlay的风格margin-top: 50%; position: relative; top: -(half-image's-height)px。
2021-03-28 18:02:32
我怎样才能在这个 div ( ) - 屏幕的中心添加loading.jpg( $("#loading")) .overlay？
2021-03-30 18:02:32
@minitech 它也自动与窗口的调整大小变化对齐......邪恶！！！这是最终的小提琴（我添加了一些角色定制）jsfiddle.net/jJ85P
2021-04-03 18:02:32
@minitech有什么区别background-position: center center;和text-align: center...？
2021-04-06 18:02:32

禁用所有鼠标单击

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');
@charles-ma 我想你是对的！混合方法是更好的选择。
2021-03-22 18:02:32
我不知道您可以禁用对整个文档的点击！我想我<div id="doc">毕竟不需要=)
2021-03-23 18:02:32
你是对的，绑定到文档下方元素的 JS 处理程序仍然会触发，但它会停止 html 可点击事件，如链接导航和表单提交。它也不会禁用中间点击，我不知道禁用它的跨浏览器方式。但是 OP 可能可以使用我的方法和@minitec 描述的 css 覆盖的混合来实现他想要的
2021-03-24 18:02:32
@charles-ma 即使有了这个代码，它仍然在 IE8 上点击：jsfiddle.net/f7xFy/3
2021-03-30 18:02:32
这不会禁用中间点击。此外，在事件从实际元素冒泡后，将调用在文档级别设置的事件处理程序。（你stopPropagation()在它已经传播到顶部之后调用。）jsfiddle.net/WWx9B
2021-04-06 18:02:32

就像是：

    $('#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();
我是初学者，能详细说说吗？
2021-03-22 18:02:32

冻结 UI 的最简单方法是使 AJAX 调用同步。

通常同步 AJAX 调用违背了使用 AJAX 的目的，因为它冻结了 UI，但是如果您想阻止用户与 UI 交互，那就去做吧。

+1 好主意 :) 虽然，如果用户沮丧地按下一堆键，他们不会在完成后都回来吗？
2021-03-24 18:02:32
@gilly3 我不知道你在说什么 :,( 这对我来说听起来很胡言乱语（太高级了）
2021-04-14 18:02:32
其它你可能感兴趣的问题
上一篇使用 firebase 云功能向非谷歌服务器发送 POST 请求 下一篇Javascript从具有多个属性的文件输入元素中获取文件数量及其文件名？