Vue项目监听touch事件实现移动端滑动

        最近需要开发一个前端Web页面，该页面包含多张重叠卡片，卡片可以拖动切换显示顺序，因此需要监听相应事件获取触点信息（滑动开始与结束时触点的Y轴位置）。

        由于该页面实际使用场景在移动端触摸屏，电脑端监听鼠标事件（mouseout、mouseup等）或者拖动事件（dragstart、dragend等）实现的方式在触摸屏上不可用，需要监听touch相关事件（touchstart、touchend）

        由于对touch事件不熟悉，开发过程踩了不少坑，特此记录，以备后续回顾。

        首先在元素上绑定事件监听函数

<template>
    <div @touchstart="touchstart($event)" @touchend="touchend($event)">
        <Card>卡片1</Card>
        <Card>卡片2</Card>
        <Card>卡片3</Card>
    </div>
</template>

        touchstart事件的入参是TouchEvent对象，该对象包含多个参数，其中touchstart事件的触点信息位于TouchEvent对象下的touches数组中，获取touchstart事件发生时触点在Y轴方向位置信息的代码如下

handleTouchStart(el) {
    var pos_start_Y = el.touches[0].clientY
}

        但是touchend事件的触点信息位于TouchEvent对象下的另一个参数中，即changedTouches，所以获取touchend事件发生时触点在Y轴方向位置的代码如下

handleTouchEnd(el) {
    var pos_end_Y = el.changedTouches[0].clientY
}

        通过比对两次触点在Y轴方向的位置信息，就可以判断滑动方向，从而切换相应卡片