uniapp 如何阻止滚动事件冒泡和移动事件冒泡

在uniapp开发中，如何阻止滚动事件和移动事件的冒泡？我在使用scroll-view组件时，发现内部滚动会触发外层页面的滚动行为，尝试过@touchmove.stop和@scroll.stop但无效。请问正确的阻止事件冒泡方法是什么？是否需要通过JS手动处理event对象？

2 回复

在uniapp中，阻止滚动事件冒泡可使用@touchmove.stop；阻止移动事件冒泡用@touchmove.prevent。注意在特定场景下可能需要结合catch事件绑定。


在 UniApp 中，可以通过以下方法阻止滚动事件和移动事件的冒泡：

1. 阻止滚动事件冒泡

在需要阻止冒泡的元素上添加 @touchmove.stop 或 @scroll.stop 事件修饰符。

<template>
  <view @touchmove.stop="handleTouchMove">
    <!-- 内容区域 -->
  </view>
</template>

<script>
export default {
  methods: {
    handleTouchMove(e) {
      // 处理触摸移动事件，不会冒泡到父元素
    }
  }
}
</script>

2. 阻止移动事件冒泡

使用 @touchmove 结合 .stop 修饰符阻止触摸移动事件的冒泡。

<template>
  <view @touchmove.stop="onTouchMove">
    <!-- 子元素 -->
  </view>
</template>

<script>
export default {
  methods: {
    onTouchMove(e) {
      // 阻止事件冒泡
    }
  }
}
</script>

3. 注意事项

  • 滚动容器：如果父元素有滚动，可能需要额外处理滚动穿透问题。
  • 兼容性：在部分平台（如小程序）中，可能需要使用 catchtouchmove 代替：
    <view catchtouchmove="handleTouchMove"></view>
  • 事件对象：在方法中可以通过事件对象 e 获取详细信息。

4. 完整示例

<template>
  <view class="parent" @touchmove="parentMove">
    <view class="child" @touchmove.stop="childMove">
      子元素（阻止冒泡）
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    parentMove() {
      console.log('父元素移动')
    },
    childMove() {
      console.log('子元素移动，不触发父元素')
    }
  }
}
</script>

通过以上方法即可有效阻止事件冒泡，确保事件只在当前元素触发。

回到顶部