基于jquery手机手势封装

手机 百度 touch

禁用长按文本被选中

*{
-webkit-touch-callout:none;
 -moz-user-select: none; /*火狐*/
 -webkit-user-select: none; /*webkit浏览器*/
 -ms-user-select: none; /*IE10*/
 -khtml-user-select: none; /*早期浏览器*/
 user-select: none;
}

touchstart / touchmove / touchend / touchcancel 是html5为移动设备提供的手势触发事件

当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

案例：

<div ontouchstart="fn()"></div>

或者

$('div').on('touchstart',function(){});

长按tap思路：
利用touchstart,手指放在手机屏幕上但不拿起这样触发了touchstart，在这过程中执行一个fn,此fn又不断的自调用执行相应的逻辑，直到手指从屏幕中拿起触发touchend和touchcencel，结束此fn的调用。
注意要做bug处理，在滑动的时候就禁止长按触发。

//长按
function $tap(dom,fn){
   $(dom).on('touchstart',function(e){
      var touch_time=new Date()/1000; //记录手指放在屏幕上的时间

      tap_run();
      function tap_run(){
          e.preventDefault();
          e.stopPropagation();
          var nowtime=new Date()/1000;
          var move_time= nowtime-touch_time;
          $.globalEval("var time_id=null");
          time_id=setTimeout(tap_run,100);
          $(this).on('touchmove',function(){ //滑动的时候禁止长按效果触发
            $('#p2').text('滑动');
            clearTimeout(time_id);
          });
          if(move_time>1){ //手指放在屏幕上大于1秒后触发长按效果
             (fn)();
             clearTimeout(time_id);
          }
       }

   });
 }


调用：
$tap('body',function(){
   $('#p1').text('长按');
});

长按案例：

https://sdeno.com/wp-content/uploads/2016/08/tap/tap.html