如何完全禁用任何鼠标单击-前端问题

How to completely DISABLE any MOUSE CLICK(如何完全禁用任何鼠标单击)

本文介绍了如何完全禁用任何鼠标单击的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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).

如何禁用 div id="doc" 上的任何鼠标点击(右键单击、左键单击、双击、中键单击、x 单击)?
我想将该代码添加到 loading.js

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

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

推荐答案

你可以覆盖一个大的、半透明的 <div> 来接受所有的点击.只需使用以下样式将新的 <div> 附加到 <body> :

You can overlay a big, semi-transparent <div> that takes all the clicks. Just append a new <div> to <body> with this style:

.overlay {
    background-color: rgba(1, 1, 1, 0.7);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

这篇关于如何完全禁用任何鼠标单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

问题描述

推荐答案

基础教程推荐