touchmove 长按_移动端VUE点击、滑动和长按等事件处理（自定义指令）

问题：

移动设备上的触摸事件：touchstart、touchmove、touchend

如何利用它们三个来处理点击、长按、滑动等操作，以及如何在测试用例中模拟它们的操作

参考了：

//感谢！！！

解决

使用vue自定义指令来干这件事

touchstart来记录开始点击的位置和时间，并在这里边判断 长按 操作

touchend来确定结束点击的位置和时间，来区分 点击 操作以及 不同方向的滑动 操作

需要有v-on一样的修饰符来处理不同的触发条件(.stop .prevent .self .once)

移动设备上人类手指太粗导致的点击位置的问题的修正(使用Touch事件中的changeTouches来确定点击的中心位置)

移动设备滑动方向的判断(思路来自mui源码)

然后直接上操作类

class VueTouch {

/**

* @param el 绑定的DOM

* @param binding 自定义指令中的binding对象

* @param type 绑定的事件类型

*/

constructor(el, binding, type) {

let g = this;

g.obj = el;

g.binding = binding;

g.touchType = type;

g.firstTouchPosition = {x: 0, y: 0};

g.firstTouchTime = 0;

/**

* =========================================

* 事件绑定有两种方式

* @example

* 1. v-tap="showDialog" 绑定一个方法对象

* 2. v-tap="{fn:click123, param1:1, param2:2, param3:{aaa:'123'} ...}"

* 绑定一个JSON字面量，fn是执行的方法，后边的是需要传递的参数

* 事件回调参数

* @param 第一个参数是event，事件对象

* @param 第二个