如何使网页上的所有内容都无法点击，直到使用 Javascript 加载某些内容

【问题标题】：How to make everything on a web page unclickable until something loads with Javascript如何使网页上的所有内容都无法点击，直到使用 Javascript 加载某些内容
【发布时间】：2020-10-14 08:59:44
【问题描述】：

我已经使用 Javascript 为我的网站制作了自己的反广告拦截程序。在实际警报出现之前会有一点延迟，在此期间，用户可以点击我实际网页上的任何内容。

有什么我可以添加到我的 Javascript 中的东西，使我的网页的其余部分无法点击，除非没有检测到广告拦截？

我知道我可以在我的 CSS 中添加什么来使页面无法点击，但我不确定如果我检测到广告拦截器，我如何才能使该页面仅处于活动状态。

【问题讨论】：

您是否考虑过阻止默认点击事件？

标签： javascript html css web

【解决方案1】：

您可以在捕获阶段向窗口添加点击监听器，并在事件上调用stopPropagation 和preventDefault，这样其他监听器就不会运行：

const handler = e => {
  e.stopPropagation();
  e.preventDefault();
};
window.addEventListener('click', handler, true);
setTimeout(() => {
  console.log('clicks enabled');
  window.removeEventListener('click', handler, true);
}, 3000);

document.querySelector('button').addEventListener('click', () => console.log('button 1 clicked'));

<button>click to run listener attached via JS</button>

<button onclick="console.log('button 2 clicked')">alert</button>

<form>
<button>submit form</button>
</form>

【讨论】：