jquery 点击后如何禁止点击页面上的任何元素

Question

我正在尝试禁用整个页面，方法是在已点击后不允许再点击页面上的任何地方。我知道有很多来源具有相似的上下文，但没有找到对我的解决方案的任何令人满意的答案。 js:

  $("#link").on( "click", function() {
    $(this).attr('disabled','disabled');
    $("div.container").css("opacity", 0.4);
    $("#loading").css("display","block");
});

使用上面的代码我只能将页面变灰，但我还希望能够在变灰时禁用对页面的任何点击。

html:

<div class="container">
  <a href="#">Link</a>
</div>

css:

#loading  {
background: url(../images/loading.png);
display: none;
margin: auto;
}

对此有什么想法吗？谢谢！

Answer 1

在您的内容之上放置一个叠加层怎么样？

JS:

$(document).ready(function(){
    $("#link").on( "click", function() {
        $(body).append('<div id="overlay"></div>');
        $("#loading").show(); // sets css to display: block (can also use fadeIn()
    });
});

CSS:

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0.6;
    z-index: 100;
}
#loading {
    z-index: 101;
    position: relative;
    background: url(../images/loading.png);
    display: none;
    margin: auto;
}

Answer 2

要禁用任何 html 元素（按钮、锚点、复选框等）的点击功能，只需设置 onclick = "return false"

<div class="container">
  <a href="#">Link</a>
</div>

$('a').attr("onclick","return false");

jquery 点击后如何禁止点击页面上的任何元素

How to disable the clicking of any element on the page after a jquery click

jquery

javascript-events