调用e.preventDefault()阻止页面滚动却导致内部点击事件失效的问题

问题背景 #

开发了一个支持触摸关闭的移动端上滑Tab/模态框，元素通过动态方式追加到DOM中。给内部按钮绑定click事件后无法触发，但直接调用btn.click()却能正常执行。排查发现问题出在touchstart、touchmove、touchend事件中调用的e.preventDefault()——该方法虽能阻止页面滚动，但会影响内部动态添加的点击事件。

疑问解答 #

1. 有没有无需调用e.preventDefault()就能阻止页面滚动的方法？ #

有两种实用方案：

• CSS控制法：打开模态框时，给body添加overflow: hidden; height: 100vh;样式，关闭时移除。注意iOS端可能需要额外添加position: fixed来避免滚动回弹的问题。
• 精准拦截法：仅在特定条件下调用e.preventDefault()。比如判断触摸操作是针对模态框的拖拽行为，且触摸方向为垂直方向（若模态框自身不需要垂直滚动），再阻止默认行为，避免全局拦截影响内部交互。

2. 为什么e.preventDefault()会阻止内部点击事件执行？ #

移动端浏览器的事件触发序列为：touchstart → touchmove → touchend → click（存在300ms延迟）。当在触摸事件中调用e.preventDefault()，会阻止浏览器触发后续的默认行为，包括将触摸序列转换为click事件。浏览器会认为你要完全自定义触摸交互逻辑，因此不会自动生成并触发原生click事件。

3. 为什么btn.click()仍能正常工作？ #

btn.click()是主动触发的合成事件，并非浏览器通过触摸序列转化生成的原生click事件。它会直接调用按钮上绑定的click事件监听器，不受触摸事件中preventDefault()的影响，因此可以正常执行。

4. 如何优化代码，既能阻止页面滚动，又能正常添加动态事件？ #

推荐采用精准拦截+事件冒泡阻断的方案，既实现模态框的拖拽关闭，又不影响内部元素的点击交互：

function openTab(config) {
  const { onRender } = config

  document.querySelector('#main').insertAdjacentHTML('beforeend', `
    <div class="swipe-tab">
      <div class="swipe-tab__content"></div>
    </div>
  `)

  const swipeTab = document.querySelector('.swipe-tab')
  let startY = 0

  // 记录触摸起始位置
  swipeTab.addEventListener('touchstart', e => {
    startY = e.touches[0].clientY
  })

  swipeTab.addEventListener('touchmove', e => {
    const moveY = e.touches[0].clientY
    // 判断是否为向下拖拽（假设上滑关闭，向下拖拽为关闭方向）
    const isDragDown = moveY - startY > 10
    // 仅在拖拽关闭模态框时阻止页面滚动
    if (isDragDown) {
      e.preventDefault()
    }
  })

  swipeTab.addEventListener('touchend', e => {
    const endY = e.changedTouches[0].clientY
    // 根据拖拽距离判断是否关闭模态框
    if (endY - startY > 50) {
      swipeTab.remove()
      // 关闭时恢复body滚动
      document.body.style.overflow = ''
      document.body.style.height = ''
    }
  })

  // 打开模态框时禁止body滚动
  document.body.style.overflow = 'hidden'
  document.body.style.height = '100vh'

  if (onRender) onRender()
}

openTab({
  onRender() {
    document.querySelector('.swipe-tab__content').insertAdjacentHTML('beforeend', `
       <button class="test-btn">点击测试</button>
    `)

    const btn = document.querySelector('.swipe-tab .test-btn')

    btn.addEventListener('click', e => {
      console.log('clicked')
    })

    // 阻断按钮的触摸事件冒泡，避免被模态框的触摸监听器影响
    btn.addEventListener('touchstart', e => {
      e.stopPropagation()
    })

    btn.click()
  }
})

配套CSS样式：

.swipe-tab {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  background-color: #ffffff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.test-btn {
  padding: 12px 24px;
  margin: 20px;
  font-size: 16px;
}

这个方案通过以下几点实现需求：

• 用CSS临时禁止body滚动，搭配触摸事件的精准拦截，双重保障页面不滚动
• 给内部按钮添加touchstart事件阻断冒泡，避免模态框的触摸逻辑影响按钮的点击事件
• 移除touchend中的preventDefault()，确保触摸序列能正常转化为click事件

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