H5开发中js长按事件

H5地图开发中js长按事件

• 需求：以在百度地图中为例，我们需要在地图上长按（大约500s，可以自定义），然后显示地图标注，下面两种方式对比。

方式一：使用js touch事件模拟

var that = this;
var timeOutEvent  = 0;
that.map.addEventListener("touchstart",  function(e) {
  // 长按事件触发
  timeOutEvent = setTimeout(function() {
    timeOutEvent = 0;
    that.addMarkersToMap(e);
  }, 500);
  //长按500毫秒
});

  that.map.addEventListener("touchmove", function() {
    clearTimeout(timeOutEvent);
    timeOutEvent = 0;
  });

  that.map.addEventListener("touchend", function() {
    clearTimeout(timeOutEvent);
    if (timeOutEvent != 0) {
      // 点击事件
    }
    return false;
  });

方式二：使用longpress监听事件

that.map.addEventListener("longpress",  function(e) {
    // 长按事件触发
      that.addMarkersToMap(e);
    }
  );
 注：此处以在百度地图中为例，addEventListener可以多次绑定

that.addMarkersToMap(e);为自定义的添加标注方法，不在讨论范围内。

从上面的对比来看，代码量上方式二明显简洁许多，性能上方式二优势明显，是监听事件自带的长按事件，而且本人在开发中亲测过，方式一有时候会出现长按不灵敏的现象，特别是地图在长按时有滑动的现象时就失效了，建议在开发中使用方式二。但是方式一是一种思想，我们不能摒弃它