Toggle Device Toolbar激活时点击按钮意外触发链接问题求助

这是典型的**触摸事件穿透（点击穿透）**问题——当开启Toggle Device Toolbar模拟移动端环境时，浏览器切换到触摸事件模式，click事件本身存在300ms延迟，再加上布局层级的潜在重叠，就会出现点击按钮时，事件“穿透”到下方链接元素的情况。

下面是几种可行的解决办法：

1. 阻止按钮的触摸事件默认行为 #

直接在按钮的触摸事件里拦截默认行为，避免触发后续的穿透click，同时保留桌面端的click事件兼容：

const toggleBtns = document.querySelectorAll('.toggle-download');

toggleBtns.forEach(btn => {
  // 处理触摸事件
  btn.addEventListener('touchstart', function(e) {
    e.preventDefault(); // 阻止默认触摸动作，避免触发延迟的click
    e.stopPropagation();
    // 执行切换逻辑
    const targetId = this.getAttribute('data-target');
    document.getElementById(targetId).classList.toggle('show');
  });

  // 兼容桌面端点击
  btn.addEventListener('click', function(e) {
    e.stopPropagation();
    const targetId = this.getAttribute('data-target');
    document.getElementById(targetId).classList.toggle('show');
  });
});

2. 控制链接容器的点击可用性 #

给包含链接的容器设置状态类，隐藏时禁用其点击事件，显示时恢复：

/* 隐藏状态下禁止链接容器接收点击 */
.download-links-container:not(.show) {
  pointer-events: none;
}

这样当盒子没展开时，下方链接根本不会响应点击，自然不会被穿透触发。

3. 给按钮设置更高层级 #

检查布局的z-index，确保按钮的层级高于下方的链接容器，从根源上避免事件穿透：

.toggle-download {
  position: relative;
  z-index: 100; /* 数值比链接容器的z-index大即可 */
}

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