h5实现穿透
H5 实现事件穿透
在移动端 H5 开发中，事件穿透通常指点击事件穿透到下层元素。常见场景如弹窗、遮罩层需要阻止底层页面滚动或点击。
使用 CSS 属性 pointer-events
通过 CSS 的 pointer-events 属性控制元素是否响应鼠标事件：
.overlay {
pointer-events: none; /* 允许事件穿透 */
}
.mask {
pointer-events: auto; /* 阻止事件穿透 */
}动态控制穿透行为
通过 JavaScript 动态切换穿透状态：
document.getElementById('mask').addEventListener('click', function() {
this.style.pointerEvents = 'none';
setTimeout(() => { this.style.pointerEvents = 'auto'; }, 300);
});阻止默认行为
对于滚动穿透，在 touchmove 事件中阻止默认行为：
document.body.addEventListener('touchmove', function(e) {
if (document.querySelector('.modal-open')) {
e.preventDefault();
}
}, { passive: false });弹窗场景处理
弹窗出现时给 body 添加固定定位：
body.modal-open {
position: fixed;
width: 100%;
}通过 JavaScript 动态切换：
function openModal() {
document.body.classList.add('modal-open');
document.body.style.top = `-${window.scrollY}px`;
}
function closeModal() {
const scrollY = document.body.style.top;
document.body.classList.remove('modal-open');
window.scrollTo(0, parseInt(scrollY || '0') * -1);
}第三方库解决方案
使用专门解决穿透问题的库如 body-scroll-lock：
import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
disableBodyScroll(document.getElementById('modal'));
enableBodyScroll(document.getElementById('modal'));
