当前位置：首页 > HTML

h5实现穿透

2026-03-06 12:39:14HTML

H5 实现事件穿透

在移动端 H5 开发中，事件穿透通常指点击事件穿透到下层元素。常见场景如弹窗、遮罩层需要阻止底层页面滚动或点击。

使用 CSS 属性 `pointer-events`

通过 CSS 的 pointer-events 属性控制元素是否响应鼠标事件：

.overlay {
  pointer-events: none; /* 允许事件穿透 */
}
.mask {
  pointer-events: auto; /* 阻止事件穿透 */
}

动态控制穿透行为

通过 JavaScript 动态切换穿透状态：

h5实现穿透

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 添加固定定位：

h5实现穿透

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'));

分享给朋友：