此页内容

移动端H5-相关问题

耶温

152字小于1分钟

2024-05-09

移动端H5-相关问题

H5 页面滑动时，触发浏览器自带的滑动返回解决方案

/* 禁止浏览器默认左右滑动 */
html {
  touch-action: none;
  touch-action: pan-y;
}

H5 阻止屏幕滑动事件，导致内部盒子内容超出时无法滚动解决方案（事件冒泡）

//父盒子阻止touchmove事件
let a = document.querySelector(".father");
a.addEventListener(
  "touchmove",
  (e) => {
    e.stopPropagation();
    e.preventDefault();
  },
  false
);

// 阻止子元素继承父元素的事件(阻止事件冒泡)
let b = document.querySelector(".son");
b.addEventListener(
  "touchmove",
  (e) => {
    e.stopPropagation();
  },
  false
);