移動端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端