H5实现按钮的长按事件

最近要做一个手机页面，模拟遥控器对硬件设备做控制，有对镜头的上下左右摇动、聚焦等操作。

操作体验要模拟实体遥控器，只是点击一次触发一次的话体验不好，要长按不放的时候也能生效。写出代码如下，测试为了看出效果，写了个 id = tt 的 span，代码如下，只看一部分代码就行，其他三个按钮跟第一个代码基本完全一样：

  1     $(function () {
  2 
  3         var timeOutEvent = 0;
  4         var si = 0;
  5 
  6         // 向上按钮
  7         function shake_up() {
  8             // 一次向上摇多少
  9             $("#tt").append("上摇5度, ");
 10         }
 11 
 12         function always_shake_up() {
 13             //如果是按住不放，使用setInterval，每隔多少时间触发一次动作，每过500毫秒向上摇５度
 14             si = setInterval(shake_up, 500);
 15         }
 16 
 17         $("#move_top").on({
 18             touchstart: function (e) {    // 当向上按钮被开始点中时
 19                 timeOutEvent = setTimeout(always_shake_up, 500);    // 使用setTimeout，500毫秒后执行always_shake_up
 20                 e.preventDefault();
 21             },
 22             touchmove: function () {
 23                 clearInterval(si);    //鼠标或手指从按钮上离开，删除间隔触发的setInterval对象
 24                 clearTimeout(timeOutEvent);   // 清除setTimeout对象
 25                 si = 0;
 26                 timeOutEvent = 0;
 27             },
 28             touchend: function () {
 29                 clearInterval(si);
 30                 clearTimeout(timeOutEvent);
 31                 if (timeOutEvent != 0) {
 32                     shake_up();    // timeOutEvent != 0，也就是说没有setTimeout对象，也就是还没到500毫秒就松开了手指，那就识别为一次点击，向上摇５度
 33                 }
 34                 return false;
 35             }
 36         });
 37 
 38 
 39         // 向左按钮
 40         function shake_left() {
 41             $("#tt").append("左摇5度, ");
 42         }
 43         function always_shake_left() {
 44             si = setInterval(shake_left, 500);
 45         }
 46 
 47         $("#move_left").on({
 48             touchstart: function (e) {
 49                 timeOutEvent = setTimeout(always_shake_left, 300);
 50                 e.preventDefault();
 51             },
 52             touchmove: function () {
 53                 clearInterval(si);
 54                 clearTimeout(timeOutEvent);
 55                 si = 0;
 56                 timeOutEvent = 0;
 57             },
 58             touchend: function () {
 59                 clearInterval(si);
 60                 clearTimeout(timeOutEvent);
 61                 if (timeOutEvent != 0) {
 62                     shake_left();
 63                 }
 64                 return false;
 65             }
 66         });
 67 
 68         // 向右按钮
 69         function shake_right() {
 70             $("#tt").append("右摇5度, ");
 71         }
 72         function always_shake_right() {
 73             si = setInterval(shake_right, 500);
 74         }
 75 
 76         $("#move_right").on({
 77             touchstart: function (e) {
 78                 timeOutEvent = setTimeout(always_shake_right, 500);
 79                 e.preventDefault();
 80             },
 81             touchmove: function () {
 82                 clearInterval(si);
 83                 clearTimeout(timeOutEvent);
 84                 si = 0;
 85                 timeOutEvent = 0;
 86             },
 87             touchend: function () {
 88                 clearInterval(si);
 89                 clearTimeout(timeOutEvent);
 90                 if (timeOutEvent != 0) {
 91                     shake_right();
 92                 }
 93                 return false;
 94             }
 95         });
 96 
 97         // 向下按钮
 98         function shake_down() {
 99             $("#tt").append("下摇5度, ");
100         }
101         function always_shake_down() {
102             si = setInterval(shake_down, 500);
103         }
104 
105         $("#move_bottom").on({
106             touchstart: function (e) {
107                 timeOutEvent = setTimeout(always_shake_down, 500);
108                 e.preventDefault();
109             },
110             touchmove: function () {
111                 clearInterval(si);
112                 clearTimeout(timeOutEvent);
113                 si = 0;
114                 timeOutEvent = 0;
115             },
116             touchend: function () {
117                 clearInterval(si);
118                 clearTimeout(timeOutEvent);
119                 if (timeOutEvent != 0) {
120                     shake_down();
121                 }
122                 return false;
123             }
124         });
125     });

javascript code