vue父组件touchStart事件与子组件事件冲突 2024-01-25

解决：使用.self修饰符

@touchstart.self="touchStart"
@touchmove.self="touchMove"
@touchend.self="touchEnd"

<script>
let touchStartX = 0
// 触摸时的原点
let touchStartY = 0
// 时间记录，用于滑动时且时间小于1s则执行左右滑动
let time = 0
// 记录/清理时间记录
let interval = ''
// x轴方向移动的距离
let touchMoveX = 0
// y轴方向移动的距离
let touchMoveY = 0

const clearTouchRecord = () => {
    touchStartX = 0
    touchStartY = 0
    time = 0
    touchMoveX = 0
    touchMoveY = 0
    clearInterval(interval)
}
const touchStart = (e) => {
    // 获取触摸时的原点
    touchStartX = e.touches[0].pageX
    // 获取触摸时的原点
    touchStartY = e.touches[0].pageY
    // 使用js计时器记录时间
    interval = setInterval(function () {
        time++
    }, 100)
}
const touchMove = (e) => {
    touchMoveX = e.touches[0].pageX
    touchMoveY = e.touches[0].pageY
}
const touchEnd = () => {
    // 点击屏幕（非移动）
    if (touchMoveX === 0 && touchMoveY === 0) {
        clearTouchRecord()
        return
    }

    let moveX = touchMoveX - touchStartX
    let moveY = touchMoveY - touchStartY
    // 转正数
    if (Math.sign(moveX) === -1) {
        moveX = moveX * -1
    }
    if (Math.sign(moveY) === -1) {
        moveY = moveY * -1
    }
    // 上下
    if (moveX <= moveY) {
        // 向上滑动
        if (touchMoveY - touchStartY <= -30 && time < 10) {
            console.log('向上滑动_')
        }
        // 向下滑动
        if (touchMoveY - touchStartY >= 30 && time < 10) {
            console.log('向下滑动 ')
        }
    }
    // 左右
    else {
        // 向左滑动
        if (touchMoveX - touchStartX <= -30 && time < 10) {
            console.log('左滑页面')
        }
        // 向右滑动
        if (touchMoveX - touchStartX >= 30 && time < 10) {
            console.log('向右滑动')
        }
    }

    clearTouchRecord()
}
</script>