Question

如何在单击按钮时禁用整个网页元素，以避免导致多次交易的意外多次点击？

线程建议使用div，以便在单击按钮时，div将放在元素的顶部。

除了div叠加之外还有其他解决方法吗？

我正在使用JavaScript，JSP，JQuery，AJAX

Answer 1

您可以使用以下示例通过简单地使用JQuery fadein，fadeout函数来禁用任何事件上的网页的全部内容。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn").click(function(){
      $("#cover").fadeIn(1000);//on event
      //some processing
      alert('processing');
      $("#cover").fadeOut(100); //after done.
    });
});
</script>
<style>
#hide{
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   opacity:0.50;
   background: #f2f2f2;
   z-index: 10;
   display: none;
}
</style>
</head>
<body>
  <div>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
    <button id="btn" value="Click">Click</button>
  </div>
  <div id="hide"> 
  </div>
</body>
</html>

Answer 2

您可以使用CSS指针事件属性，该属性将禁用任何控件的单击。

参见： https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

禁用网页元素

2 个答案: