vue移动端h5长按事件(自定义长按指令)

背景

好久没更新了，今天简简单单来水一下吧，老师们。

最近的移动端项目，需要实现一个长按对比功能。

移动端长按事件

首先移动端并没有直接长按事件，所以我们需要自己模拟一个长按事件。

** 移动端touch事件如下**

@touchmove="onTouchMove" // touchmove事件 触摸开始
@touchend="onTouchEnd" // touchend事件 触摸结束
@touchstart="onTouchstart" // touchstart事件 触摸开始

于是乎我们结合以上事件

touchstart 的时候我设置一个定时器，比如说500毫后执行判断是长按事件,

touchend 的时候，就是取消了长按(并且如果有定时器清除定时器)。

长按事件(vue自定义指令)

我们如果有很多个地方需要判断长按逻辑，那么不可能每个地方都复制，所以我们可以自定义一个指令来实现这个功能。

好处就是复用代码

export default {
  install(Vue) {
    Vue.directive("long-press", {
      // 当被绑定的元素插入到DOM中时……
      inserted: function(el, binding, vnode) {
        let pressTimer = null;

        // 监听touchstart事件
        el.addEventListener("touchstart", e => {
          // 阻止默认事件，比如触摸滚动
          e.preventDefault();

          // 清除之前的定时器（如果存在）
          if (pressTimer !== null) {
            clearTimeout(pressTimer);
          }

          // 设置定时器，等待一段时间后执行长按逻辑
          pressTimer = setTimeout(() => {
            // 调用传入的函数，并传入事件对象
            if (typeof binding.value === "function") {
              // 判定为长按
              binding.value(true, e);
            }
          }, 500); // 假设长按时间为500毫秒
        });

        // 监听touchend和touchcancel事件来取消定时器
        el.addEventListener("touchend", e => {
          // 取消长按
          binding.value(false, e);
          clearTimeout(pressTimer);
          pressTimer = null;
        });

        el.addEventListener("touchcancel", e => {
          clearTimeout(pressTimer);
          pressTimer = null;
        });
      },
      // 当绑定元素的父组件被卸载时，解绑事件
      unbind: function(el) {
        el.removeEventListener("touchstart");
        el.removeEventListener("touchend");
        el.removeEventListener("touchcancel");
      }
    });
  }
};

使用

<div v-long-press="onLongPress"></div>

/**
 * @param {boolean} isLong 是否长按
 * @param {Event} e 事件对象
 */
function onLongPress(isLong, e) {
  if (isLong) {
    console.log("长按中");
  } else {
    console.log("取消长按");
  }
}

总结

以上就是移动端长按事件的实现，如果觉得有用点个赞吧。