如何阻止网站嵌入式推文的所有交互？pointer-events:none方案失效

这个问题我之前也碰到过！Twitter的嵌入脚本有点“顽固”——它会动态生成独立的DOM元素（比如iframe或者嵌套div），这些元素根本不在你原来设置pointer-events:none的div范围内，所以你的样式完全影响不到它们，点击自然还是能触发。

要彻底阻止用户和推文交互，最可靠的方法是给整个推文容器加一层隐形遮罩层，让它覆盖在推文上方拦截所有点击。具体实现步骤如下：

1. 把原来的推文外层容器改成相对定位，作为遮罩层的定位参考
2. 添加一个绝对定位的遮罩层div，确保它完全覆盖推文区域，并且层级在推文内容之上

下面是修改后的完整代码：

<div class="tweet-container" style="position: relative; display: inline-block; float: left;">
  <!-- 原嵌入式推文代码 -->
  <blockquote class="twitter-tweet">
    <p lang="en" dir="ltr">Or hey, ya know, just relax and have fun. <a href="https://twitter.com/U53iZEL9O9">https://twitter.com/U53iZEL9O9</a></p>&mdash; Meg Turney (@megturney) <a href="https://twitter.com/megturney/status/1230141853246402560?ref_src=twsrc%5Etfw">February 19, 2020</a>
  </blockquote>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  
  <!-- 新增的隐形遮罩层 -->
  <div class="tweet-overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background-color: transparent; pointer-events: auto;"></div>
</div>

代码解释： #

• tweet-container设置position: relative：让遮罩层可以相对于这个容器定位，不会跑到页面其他位置
• 遮罩层的position: absolute + top/left/width/height: 100%：确保它完全覆盖整个推文区域，没有遗漏
• z-index: 999：保证遮罩层在Twitter生成的所有元素之上（Twitter默认的元素层级不会这么高）
• background-color: transparent：让遮罩层完全隐形，不会影响推文的视觉展示
• pointer-events: auto：让遮罩层接收所有点击事件，这样用户的点击会被遮罩层拦截，不会传递到下面的推文元素

如果之后发现还是有点击能穿透，只需要把遮罩层的z-index调得更大一点就行，比如9999，绝对能覆盖所有层级。

内容的提问来源于stack exchange，提问作者Elad Ratson