解决h5在移动端touchend事件不灵敏的问题-hammer.js

如题 在h5页面尝试过程中发现移动端的touchend触摸结束无法正常生效，故而寻找了插件自定义了vue指令已实现需求效果

首先在项目中安装如下插件

npm i hammer.js --save

vue 自定义指令不必多说
在项目中定义xxx.js文件，在文件中引入hammer.js

import Hammer from 'hammerjs'

然后写对应的逻辑代码 xxx.js全部代码如下

import Hammer from 'hammerjs'
function vueToch(el, type, binding) {
    this.el = el;
    this.type = type;
    this.binding = binding;
    var hammertime = new Hammer(this.el);
    hammertime.on(this.type, this.binding.value)
}
export default {
    install(Vue) {
        //长按
        Vue.directive('touch_press', {
            inserted: function (el, binding) {
                new vueToch(el, 'press', binding)
            }
        })
        //长按结束
        Vue.directive('touch_pressup', {
            inserted: function (el, binding) {
                    new vueToch(el, 'pressup', binding);
            }
        })
        //左划
        Vue.directive('touch_swipeleft', {
           
            inserted(el, binding) {
                let timer = null;
                if (timer == null) {
                    new vueToch(el, 'swipeleft', binding)
                    timer = setTimeout(() => timer = null, 1000)
                }
            }
        })
        //右划
        Vue.directive('touch_swiperight', {
          
            inserted(el, binding) {
                let timer = null;
                if (timer == null) {
                    new vueToch(el, 'swiperight', binding)
                    timer = setTimeout(() => timer = null, 1000)
                }
            }
        })
    }
}

定义了自定义指令就需要在main.js进行引入，引入代码如下（此为自己本地的路径 具体路径看xxx.js新建在何处）

import myDierctive from './utils/touch.js'
Vue.use(myDierctive)

全局注册了指令便可以使用了 使用和普通vue指令一样。本封装方法指令的绑定的是处理事件的方法

v-xxx="处理事件的方法"

hammer.js 扩展

事件	解释
tap	点击
press	按住
pressup	按住抬起
pan	平移
panstart	拖动开始
panend	拖动结束
pancancel	拖动取消
panleft	向左移动
panright	向右移动
panup	向上拖动
pandown	向下拖动
swipe	快速滑动
swipeleft	向左滑动
swiperight	向右滑动
swipeup	向上滑动
swipedown	向下滑动
pinch	捏拿缩放
pinchstart	多点触控开始
pinchend	多点触控结束
pinchcancel	多点触控取消
pinchin	多点触控时两手指越来越近
pinchout	多点触控时两手指越来越远
rotate	旋转
rotatestart	旋转开始
rotatemove	旋转过程
rotateend	旋转结束
rotatecancel	旋转取消