H5实现按钮的长按事件

Posted 2021-02-04 sqtu

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

操作体验要模拟实体遥控器，只是点击一次触发一次的话体验不好，要长按不放的时候也能生效。写出代码如下，测试为了看出效果，写了个 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

最终效果截图就像下面这样：

 

 

如果只是快速点击一下，就触发一次动作；长按不放的话，就每隔500ms触发一次动作，一直到放开按钮。

 

注意：手机大部分浏览器或是手机本身的界面都有长按功能，有的打开一个菜单，有的是对文字进行复制粘贴，跟我们这里自己写的长按功能冲突了。使用下面css和js来禁用原生的长按功能：

1         /*如果是禁用长按选择文字功能，用css*/
2         * {
3             -webkit-touch-callout: none;
4             -webkit-user-select: none;
5             -khtml-user-select: none;
6             -moz-user-select: none;
7             -ms-user-select: none;
8             user-select: none;
9         }

1     // 如果是想禁用长按弹出菜单, 用js
2     window.addEventListener(‘contextmenu‘, function (e) {
3         e.preventDefault();
4     });