Question

在我的一些AJAX请求中，我显示了一个加载器，它使整个屏幕变暗以显示用户在加载时不应该点击。但是......我还没有实现任何可以让页面无法点击的东西。

我的代码有这样的结构：

$("#loading-overlay").toggle();

//my ajax

$("#loading-overlay").toggle();

因此，当切换叠加层时，我还想将css类设置为我的文档，可能是我的body或viewport，这使得它完全无法点击。我一直在网上查看，但大多数解决方案似乎照顾较小的部分，功能较大，或者过时。我该如何解决这个问题？

Answer 1

要阻止任何点击，您可以使用pointer-events: none：

元素永远不是鼠标事件的目标;但是，鼠标事件如果那些后代具有，则可以将其后代元素作为目标指针事件设置为其他值。在这种情况下，鼠标事件将触发此父元素上的事件侦听器适合在活动期间往返于后代的路上捕获/泡沫阶段。

pointer-events: none是widely supported by all main browsers，也是IE 11。

function showAlert() {
  alert("Alert");
}

body {
  pointer-events: none;
}

<button onclick="showAlert()">Click me</button>

Answer 2

你所描述的内容实际上并没有多大意义，你说你已经用覆盖元素使整个页面变暗，但你希望页面不可点击。

但是如果你使用了一个覆盖整个页面的元素并且它的z-index足够高以使叠加效果起作用，那么当它们应该只是在覆盖元素上而不是在下面的那些元素上触发时，点击是如何触发的？

无论我刚刚说了什么似乎有些奇怪，你都可以使用：

body {
    pointer-events: none;
}

Answer 3

覆盖整个页面的叠加层会阻止真正的点击。

如果他真的想点击，那么用户可以轻松地从DOM中删除叠加层。

如果您还想阻止用户使用Enter键表和提交表单，则必须检查表单提交本身。在所有其他行动......

最简单的选择是阻止发送任何新的ajax。要实现这一点，您应该有一个全局变量来跟踪ajax调用的进行与否。您可以使用$ .ajaxStart和$ .ajaxEnd。同样在ajaxSend中你可以阻止新的请求，如果已经完成了......就像这样

var ajaxing = false;
$.ajaxSend(function(e, xhr) {
    if(ajaxing){
        xhr.abort();
    }
});
$.ajaxStart(function(e, xhr) {
    ajaxing = true;
});
$.ajaxEnd(function(e, xhr) {
    ajaxing  = false;
});

您可以添加选项以将某些请求标记为阻止，而某些请求则不会。甚至你的叠加也可以直接触发那些事件处理程序。

Answer 4

您应该添加JQuery event.preventDefault()方法。

这将检测上部div的点击并阻止进一步的操作。

$("#superdiv").click(function(event) {
  event.preventDefault();
  $("<body>")
    .append("default " + event.type + " prevented")
    .appendTo("#log");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>event.preventDefault demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
  <div id="superdiv" style="position: absolute; top:0; left: 0; bottom:0; right: 0; z-index:10; background-color:rgba(20,20,20,0.5)"></div>
  <a href="http://jquery.com">default click action is prevented</a>
  <div id="log"></div>


</body>

</html>

Answer 5

全宽和全高覆盖将完成

＆＃13;

div#loading-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  opacity: 0.5;
  background-color: #000;
}

＆＃13;

<body>
  <div id="loading-overlay"></div>
  <a href="#">Button</a>
</body>

＆＃13;

使整个文档/正文无法点击

5 个答案: