码迷,mamicode.com
首页 > 其他好文 > 详细

H5实现按钮的长按事件

时间:2019-01-18 18:33:31      阅读:434      评论:0      收藏:0      [点我收藏+]

标签:体验   注意   上下   生效   opened   info   间隔   分享   prevent   

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

操作体验要模拟实体遥控器,只是点击一次触发一次的话体验不好,要长按不放的时候也能生效。写出代码如下,测试为了看出效果,写了个 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毫秒向上摇5度
 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毫秒就松开了手指,那就识别为一次点击,向上摇5度
 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     });

 

H5实现按钮的长按事件

标签:体验   注意   上下   生效   opened   info   间隔   分享   prevent   

原文地址:https://www.cnblogs.com/sqtu/p/10288889.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!