移动端H5长按事件 vue自定义指令

 import Vue from 'vue'

 Vue.directive('longpress', function (el, binding){

   var timer = null;

   var start = function (e) {

       // 如果是点击事件，不启动计时器，直接返回

       if (e.type === 'click'){

           return

       }

       if (timer == null){

           // 创建定时器 ( 2s之后执行长按功能函数 )

           timer = setTimeout(function () {

               //执行长按功能函数

               binding.value()

           },2000)

       }

   }

   var cancel = function () {

       if (timer !== null){

           clearTimeout(timer)

           timer = null

       }

   }

   // 添加事件监听器

   el.addEventListener("mousedown", start);

   el.addEventListener("touchstart", start);

   // 取消计时器

   el.addEventListener("click", cancel);

   el.addEventListener("mouseout", cancel);

   el.addEventListener("touchend", cancel);

   el.addEventListener("touchcancel", cancel);

 })

1.在src目录下 新建文件夹utils文件夹，然后新建derective.js，复制上方代码，粘贴到derective.js；
2.在main.js中引入 该自定义指令js
3.在html中可以这样使用即可

<h2 v-longpress="handleLongClick">测试长按事件是否生效</h2>

总结：支持移动端跟pc端