岸在彼方

之前在做混合APP时，由于环境限制，无法使用安卓/IOS原生的长按事件，只能用JavaScript来实现，但JavaScript原生没有提供该事件，所以我们来模拟一个，去找百度找了资料，看到有人提供了思路，那就是用touchstart、touchmove与touchend来配合实现。

1) 分析

其中：
touchstart是手指按下事件；
touchmove是手指移动事件；
touchend是手指松开事件。
而且这三个事件发生时的event对象都记录有手指相对于屏幕左上角的X、Y轴的距离。

首先，如果要模拟长按事件，就先理清什么是长按事件，我们对长按事件的定义是：
1、当手指按下；
2、期间手指不移动（也可以适当给点移动距离，毕竟可能有些人会手抖。。。），超过一定时间才松开。
这一系列操作合称为长按事件。

现在我们来理一下长按要用到的关键解决方法：

1. 其中手指按下、移动、松开我们可以用上面说到的三个事件监测；
2. 如果要做移动距离的话可以用事件发生时传进来的event对象里的手指所在X、Y轴的值判断(我这里就不做了)；
3. 判断按的时间可以用一个计时器来解决。

再理下代码思路：

1. 先注册一个全局变量来存储定时器；
2. touchstart事件发生时创建定时器；
3. 期间如果定时器时间到前发生手指移动(touchmove)、手指松开(touchend)事件时就取消定时器，定时器里面的回调不会执行；
4. 如果定时器时间到，则说明达到长按的条件，执行长按的回调方法。

2) 实现

有了思路，就可以写代码：

<div id="box">
  <br><br><br>
</div>

//封装
/**
 * 模拟长按事件
 * @param domId 要绑定长按事件的dom节点id
 * @param cb 长按发生时的回调
 */
function longPress(domId, cb) {
  var timeout = null;
  var dom = document.querySelector(domId);
  dom.addEventListener('touchstart', function (event) {
    var _this = this;
    // console.log('touchstart');
    timeout = setTimeout(function () {
      timeout = null;
      cb(event, _this);
    }, 500);     //超过500毫秒就触发长按事件，我在这里是写死的，该数值可以改成动态传入
  });
  dom.addEventListener('touchmove', function (event) {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
  });
  dom.addEventListener('touchend', function (event) {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
  });
}

//调用
longPress('#box', function(event, target) {
  //长按事件发生...
  console.log(target);
});

再来个JQuery版带上事件委托的：

<ul id="list_content">
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
</ul>

//封装
/**
 * 以委托的方式模拟事件绑定
 * @param parent 父节点dom的id
 * @param target 子节点dom的类名
 * @param cb(event ,target) 长按发生时的回调，event为事件对象，target为长按的dom节点
 */
function longPress2(parent, target, cb) {
  var timeout = null;
  var $parent = $(parent);
  $parent.on('touchstart', target, function (event) {
    var _this = this;
    timeout = setTimeout(function () {
      timeout = null;
      cb(event, _this);
    }, 500);      //超过500毫秒就触发长按事件，我在这里是写死的，该数值可以改成动态传入
  });
  $parent.on('touchmove', function (event) {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
  });
  $parent.on('touchend', function (event) {
    // console.log('touchend');
    clearTimeout(timeout);
    timeout = null;
  });
}

//调用
longPress2('#list_conttent', 'li', function(event, target) {
  //长按事件发生...
  console.log(target);
});

自此，就成功模拟了屏幕长按事件~
当然，前面两个例子做的都是单个手指的长按，如果要做多手指长按，用for遍历手指分别判断即可！