如何让带pointer-events:none的音量图标点击后切换状态并穿透到下方iframe

要实现点击时同时切换音量图标状态并让点击穿透到跨域iframe，你可以通过添加一个透明的点击捕获层来解决现有问题，具体思路如下：

1. 保留原有的图标层并维持pointer-events:none，确保它不干扰点击传递，只负责显示音量状态。
2. 在最上层添加一个透明的click-catcher容器，用来捕获点击事件，同时不阻止事件向下冒泡到iframe。
3. 监听捕获层的点击事件，在事件处理函数中切换图标的背景图，实现状态同步。

修改后的代码 #

HTML

<iframe
  frameborder="0"
  height="50px"
  scrolling="no"
  src="speaker.html"
  style="bottom: 0; left: 0; position: absolute; z-index: 1"
  width="50px"
></iframe>

<!-- 音量图标层：仅显示状态，不拦截点击 -->
<div class="speaker-icon"
  style="
    background-image: url('Sound-Off.png');
    bottom: 0;
    height: 50px;
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 50px;
    z-index: 2"
></div>

<!-- 透明点击捕获层：负责监听点击，事件会自动穿透到下方iframe -->
<div class="click-catcher"
  style="
    bottom: 0;
    height: 50px;
    left: 0;
    position: absolute;
    width: 50px;
    z-index: 3;
    background: transparent;
    cursor: pointer;"
></div>

JavaScript

let isSoundOn = false;
const iconElement = document.querySelector('.speaker-icon');
const catcherElement = document.querySelector('.click-catcher');

// 监听点击事件
catcherElement.addEventListener('click', function() {
  isSoundOn = !isSoundOn;
  // 切换图标
  iconElement.style.backgroundImage = isSoundOn 
    ? 'url("Sound-On.png")' 
    : 'url("Sound-Off.png")';
  // 不阻止事件冒泡，点击会自动传递到下方的iframe
});

// 适配移动端触摸事件（可选）
catcherElement.addEventListener('touchstart', function(e) {
  e.preventDefault(); // 避免touch和click事件重复触发
  isSoundOn = !isSoundOn;
  iconElement.style.backgroundImage = isSoundOn 
    ? 'url("Sound-On.png")' 
    : 'url("Sound-Off.png")';
});

关键说明 #

• 点击穿透原理：click-catcher捕获点击后，由于没有调用event.stopPropagation()，事件会继续向下冒泡，最终触发iframe内部的点击逻辑（切换音量）。
• 图标层作用：保持pointer-events:none，确保它不会拦截点击，同时始终显示当前的音量状态，解决之前状态不同步的问题。
• 单位修正：给height和width添加px单位，避免浏览器解析样式时出现异常。

额外注意事项 #

• 由于iframe是跨域的，我们无法直接获取其内部的音量状态，因此这个方案依赖于iframe本身会响应点击事件来切换音量。如果iframe的点击逻辑有变动，可能需要调整。
• 确保click-catcher的尺寸和位置完全覆盖iframe和图标层，避免出现点击盲区。

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