移动端触摸事件阻止冒泡失效怎么办？

这个问题确实是移动端开发中常见的坑，主要是因为触摸事件的传播机制和默认行为有点特殊。你遇到的情况是因为 touchstart 和 touchmove 的行为交织在一起，导致即使你用了 e.stopPropagation() 和 .stop 修饰符，父元素的滚动事件还是会被触发。

解决这个问题的关键是明确区分用户的意图：到底是想点击按钮，还是想滚动页面。我们可以通过监听 touchstart 和 touchmove 来判断用户的手势行为。

这里是一个可行的解决方案：

<template>

  <div @touchmove="handleScroll" class="parent">

    <button 

      @touchstart="handleTouchStart" 

      @touchend="handleClick"

    >点击无效</button>

  </div>

</template>



<script>

export default {

  data() {

    return {

      isScrolling: false, // 标记是否在滚动

      startY: 0 // 记录触摸起点

    }

  },

  methods: {

    handleScroll(e) {

      if (this.isScrolling) {

        console.log('父元素滚动')

      }

    },

    handleTouchStart(e) {

      this.isScrolling = false

      this.startY = e.touches[0].pageY // 记录触摸起点位置

    },

    handleClick(e) {

      if (!this.isScrolling) {

        e.stopPropagation()

        console.log('按钮点击') // 只有非滚动时才触发点击

      }

    }

  },

  mounted() {

    document.querySelector('.parent').addEventListener('touchmove', (e) => {

      if (Math.abs(e.touches[0].pageY - this.startY) > 10) { // 判断是否有明显滑动

        this.isScrolling = true

      }

    }, { passive: false }) // 注意这里要设置 passive 为 false

  }

}

</script>

核心思路是这样的：
1. 在 touchstart 中记录触摸的起始位置。
2. 监听父容器的 touchmove 事件，通过判断手指移动的距离来区分是点击还是滚动。
3. 如果检测到明显的滚动行为，就标记 isScrolling 为 true，阻止按钮点击逻辑的执行。
4. 设置 { passive: false } 是为了确保 preventDefault() 能正常工作，否则在某些浏览器上可能会被忽略。

这样改完之后，按钮的点击功能应该就能正常触发了，同时也不会影响父容器的滚动行为。希望能帮到你！

这个问题的关键是移动端的触摸事件机制和事件冒泡的行为比你想象的要复杂一些。在移动端，触摸事件的触发顺序是 touchstart -> touchmove -> touchend，而父元素的滚动行为其实是由 touchmove 驱动的。所以即使你在子元素上用了 stopPropagation 和 preventDefault，父元素仍然可能因为 touchmove 的默认行为而触发滚动。

接下来我们一步步分析并解决：

首先，e.stopPropagation() 只能阻止事件在 DOM 树中继续向上冒泡，但它无法阻止浏览器的默认行为。也就是说，即使你阻止了 touchstart 的冒泡，touchmove 的默认行为（比如滚动）还是会触发。这就是为什么你的按钮点击功能会被父元素的滚动劫持的原因。

其次，e.preventDefault() 虽然可以阻止默认行为，但它的作用范围仅限于当前事件。如果你只在 touchstart 中调用 preventDefault，它并不能影响后续的 touchmove 事件。因此你需要在整个触摸事件链中正确地处理这些行为。

解决方案

我们可以利用一个标志位来判断用户是否正在操作按钮，并在父元素的滚动逻辑中进行条件判断，避免误触发滚动。

代码调整如下：

export default {

  data() {

    return {

      isButtonTouched: false // 用于标记按钮是否被触摸

    }

  },

  methods: {

    handleScroll(e) {

      // 如果按钮正在被触摸，则阻止滚动

      if (this.isButtonTouched) {

        e.preventDefault()

        return

      }

      console.log('父元素滚动')

    },

    handleClick(e) {

      // 标记按钮被触摸

      this.isButtonTouched = true

      console.log('按钮点击')



      // 模拟按钮点击完成后重置标志位

      setTimeout(() => {

        this.isButtonTouched = false

      }, 300) // 延迟时间可以根据实际需求调整

    }

  }

}

同时，我们需要确保按钮的触摸事件能够覆盖父元素的行为。这里对模板稍作调整：

<template>

  <div @touchmove="handleScroll" class="parent">

    <button 

      @touchstart="handleClick"

      @touchmove="e => e.preventDefault()" 

      @touchend="e => this.isButtonTouched = false"

    >点击有效</button>

  </div>

</template>

详细说明

1. 我们在组件的 data 中定义了一个 isButtonTouched 标志位，用来记录按钮是否被触摸。这个标志位会在按钮的 touchstart 事件中设置为 true，并在 touchend 或超时后重置为 false。

2. 在父元素的 handleScroll 方法中，我们检查这个标志位。如果按钮正在被触摸，就调用 e.preventDefault() 来阻止滚动。

3. 在按钮的 touchmove 事件中，我们也需要调用 e.preventDefault()，以确保按钮区域内的滑动不会触发父元素的滚动。

4. 最后，在 touchend 事件中手动将标志位重置为 false，确保状态一致。

这样做有几个好处：
- 通过标志位精确控制滚动行为，避免误触发。
- 利用 e.preventDefault() 阻止默认行为，确保按钮区域内的触摸事件不会干扰父元素。
- 使用 setTimeout 提供一定的容错时间，防止用户快速操作导致状态异常。

这种实现方式虽然稍微复杂了一点，但能很好地解决问题，特别是在复杂的移动端交互场景中。如果你还有其他疑问，随时问吧。