如何在页面完全加载前实现点击禁用（含按钮、全页场景）

一、指定按钮（#wc-proceed-to-checkout）点击控制优化 #

你当前编写的代码已经实现了「DOM加载完成后才给结算按钮绑定点击事件」的基础逻辑，如果你需要避免加载过程中按钮被点击触发其他默认行为，可以再加一层禁用保障，实现方案如下：

1. 先给目标元素默认加禁用状态，CSS代码：

div#wc-proceed-to-checkout {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}

2. 页面加载完成后解除禁用并绑定事件，JS代码调整为：

<script>
  $(document).ready(function() {
    $("div#wc-proceed-to-checkout")
      .css({"pointer-events": "auto", "opacity": 1, "cursor": "pointer"})
      .click(function () {
        launchAction();
      });
  });
</script>

二、页面完全加载前禁用整个页面点击的替代方案 #

下面提供3种可直接落地的实现方式：

方案1：CSS全局禁用 + JS加载后解除 #

实现最简单，性能损耗最低：

1. 先在全局CSS中添加默认规则：

body.loading {
  pointer-events: none;
}

2. 给body标签默认加上loading类：<body class="loading">
3. 页面加载完成后移除该类即可：

<script>
  // 如果你需要等所有资源（图片、字体等）都加载完成再解禁，用window.onload
  $(window).on('load', function() {
    $('body').removeClass('loading');
  });
  // 如果只需要DOM结构加载完成就解禁，用下面的ready事件即可
  // $(document).ready(function() {
  //   $('body').removeClass('loading');
  // });
</script>

方案2：全局加载遮罩层 #

适合需要展示加载状态的场景，用户体验更好：

1. 添加遮罩层HTML和CSS：

<div id="page-loading-mask" style="position: fixed;inset: 0;background: rgba(255,255,255,0.7);z-index: 99999;display: flex;align-items: center;justify-content: center;">
  页面加载中...
</div>

2. 页面加载完成后隐藏遮罩层：

<script>
  $(window).on('load', function() {
    $('#page-loading-mask').hide();
  });
</script>

方案3：全局事件拦截 #

适合需要自定义点击拦截逻辑的场景：

<script>
  // 页面加载前拦截所有点击事件
  function blockClick(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
  }
  document.addEventListener('click', blockClick, true);

  // 加载完成后移除拦截
  $(window).on('load', function() {
    document.removeEventListener('click', blockClick, true);
  });
</script>

内容的提问来源于stack exchange，提问作者Marko I.