vue项目中，使用ionic的滑块组件，滑动会触发页面返回问题，在此记录下

问题：混合开发的项目，使用vue3和ionic@8.2.2，页面默认左滑手势会触发页面回退，此时页面中若有滑块组件（滑块顶在页面左边），滑动滑块，依然会触发页面回退

解决方案：获取组件元素，给鼠标按下事件和手指按下事件增加阻止默认行为和阻止冒泡

<template>
     <ion-range ref="RangeRef" />
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';

const gestureOverlayEvent = (e: Event) => {
    e.stopPropagation();
    e.stopImmediatePropagation();
};

const gestureOverlay = () => {
    if (RangeRef.value?.$el) {
        RangeRef.value.$el.addEventListener('mousedown', gestureOverlayEvent);
        RangeRef.value.$el.addEventListener('touchstart', gestureOverlayEvent);
    }
};

onMounted(() => {
    gestureOverlay();
});
</script>

之前考虑复杂了，尝试了修改源码中 range 的手势优先级， 以及使用ionic的 createGesture 方法 创建手势来覆盖页面的左滑返回（swipe-back）手势，均未生效或出现了其他bug，最终没想到是这种方式解决的，故在此记录下解决方案。