Question

用户点击....“登录”按钮和其他事件后，我制作了一个加载脚本 - 让用户知道他们必须等待（直到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

Answer 1

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

Answer 2

您可以覆盖一个占据所有点击次数的大型半透明<div>。只需使用以下样式将<div>添加到<body>：

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

Answer 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');

Answer 4

类似的东西：

    $('#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();

Answer 5

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

通常，同步AJAX调用会破坏使用AJAX的目的，因为它冻结了UI，但如果您希望阻止用户与UI交互，那么就这样做。

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

5 个答案: