iOS触摸事件点击穿透问题：点击遮罩关导航时触发下层内容点击

嘿，我来帮你搞定这个问题！你遇到的是典型的事件冒泡/触摸事件穿透问题——iOS上添加触摸事件后，遮罩层的点击/触摸操作会“穿透”到下层页面元素，触发它们的点击行为。下面是两种简单有效的解决办法：

方案1：在事件处理中阻止冒泡与默认行为 #

这是最直接的解决方式，在你的触摸事件处理函数里，加上阻止事件传播和默认行为的代码，就能切断事件传递到下层元素的路径，同时避免iOS上触摸事件触发后续的click事件（这也是iOS常见的坑）。

修改你的代码如下：

var sideNav = document.getElementById('Sidenav'); 
var sliderFilter = document.getElementById('sliderFilter'); 

function handleOverlayInteraction(event) {
    // 阻止事件继续冒泡到下层元素
    event.stopPropagation();
    // 阻止触摸事件的默认行为（避免触发后续的click事件）
    event.preventDefault();
    
    // 执行你的导航关闭逻辑
    sideNav.classList.remove('active'); // 假设你用active类控制导航显示
    sliderFilter.style.display = 'none';
}

// 绑定触摸事件（针对iOS移动端）
sliderFilter.addEventListener('touchstart', handleOverlayInteraction);
// 绑定click事件（兼容桌面端和其他设备）
sliderFilter.addEventListener('click', handleOverlayInteraction);

方案2：给遮罩层添加CSS增强（可选） #

可以给遮罩层sliderFilter添加以下CSS，确保它完全覆盖视口，避免出现点击“漏缝”：

#sliderFilter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5); /* 替换成你的模糊滤镜样式 */
    z-index: 99; /* 确保层级在页面内容上方、导航栏下方 */
}

这样能保证遮罩层完全覆盖页面内容，从根源减少事件穿透的可能。

原理说明

• event.stopPropagation()：阻止事件沿着DOM树向上冒泡，下层页面元素就不会收到这个点击/触摸事件；
• event.preventDefault()：阻止触摸事件的默认行为（比如iOS上的300ms点击延迟，以及触摸后触发的click事件），避免后续的click事件误触发下层元素。

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