HTML5滑动(swipe)事件,HTML5教程 滑动（swipe）事件学习
本篇教程探讨了HTML5教程 滑动(swipe)事件学习，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。
<
移动H5开发中经常用到滑动效果(页面上移、下移、向左滑动、向右滑动等)，浏览器并没有内置swipe事件，可以通过touch事件(touchstart、touchmove和touchend)模拟swipe效果。jQuery mobile和zeptojs提供了swipe事件。jquery mobile只有swipeLeft和swipeRight，zeptojs提供了完整的tap和swipe事件。
1 /**
2 * @author accountwcx@qq.com
3 * http://git.oschina.net/accountwcx/rhui
4 *
5 * swipe事件，包括swipeLeft、swipeRight、swipeUp、swipeDown。
6 * 调用方法
7 * Rhui.mobile.swipeLeft(el, callback, options)
8 * Rhui.mobile.swipeRight(el, callback, options)
9 * Rhui.mobile.swipeUp(el, callback, options)
10 * Rhui.mobile.swipeDown(el, callback, options)
11 * 如果使用jQuery，调用方法
12 * $(el).rhuiSwipe(‘swipeLeft‘, callback, options);
13 * $(el).rhuiSwipe(‘swipeRight‘, callback, options);
14 * $(el).rhuiSwipe(‘swipeUp‘, callback, options);
15 * $(el).rhuiSwipe(‘swipeDown‘, callback, options);
16 */
17 (function(window, $){
18 var Rhui = window.Rhui || {};
19 window.Rhui = Rhui;
20 Rhui.mobile = (function(){
21 var touch = {
22 distance: 30, //滑动距离，超过该距离触发swipe事件，单位像素。
23 duration: 1000 //滑动时长，超过该时间不触发swipe，单位毫秒。
24 };
25
26 /**
27 * 绑定事件
28 * @param el 触发事件的元素
29 * @param swipe 事件名称，可选值为swipeLeft,swipeRight,swipeUp,swipeDown
30 * @param callback 事件回调函数
31 * @param isStopPropagation 是否停止冒泡，true为停止冒泡
32 * @param isPreventDefault 是否阻止默认事件，true为阻止默认事件
33 * @param triggerOnMove swipe事件有两种触发方式，一种是在touchmove过程中，只要满足滑动距离条件即触发。
34 * 一种是在touchend中，进入滑动距离判断，如果满足滑动距离触发。
35 * 默认是在touchend中触发。
36 */
37 function bindSwipe(el, swipe, callback, triggerOnMove, isStopPropagation, isPreventDefault){
38 var startPoint, endPoint, timer;
39
40 /**
41 * 计算滑动方向
42 * 首先根据x方向和y方向滑动的长度决定触发x方向还是y方向的事件。
43 * 然后再判断具体的滑动方向。
44 * 如果滑动距离不够长，不判断方向。
45 */
46 function swipeDirection(x1, y1, x2, y2){
47 var diffX = x1 - x2,
48 diffY = y1 - y2,
49 absX = Math.abs(diffX),
50 absY = Math.abs(diffY),
51 swipe;
52
53 if(absX >= absY){
54 if(absX >= touch.distance){
55 swipe = diffX > 0 ? ‘swipeLeft‘ : ‘swipeRight‘;
56 }
57 }else{
58 if(absY >= touch.distance){
59 swipe = diffY > 0 ? ‘swipeUp‘ : ‘swipeDown‘;
60 }
61 }
62
63 return swipe;
64 }
65
66 // 清除本次滑动数据
67 function clearSwipe(){
68 startPoint = undefined;
69 endPoint = undefined;
70
71 if(timer !== undefined){
72 clearTimeout(timer);
73 timer = undefined;
74 }
75 }
76
77 /**
78 * 判断是否符合条件，如果符合条件就执行swipe事件
79 * @param el {HTMLElement} 元素
80 * @param event {Event} Touch原始事件
81 * @param return 如果执行了事件，就返回true。
82 */
83 function execSwipe(el, event){
84 if(startPoint && endPoint && swipeDirection(startPoint.x, startPoint.y, endPoint.x, endPoint.y) === swipe){
85 callback.call(el, event);
86 return true;
87 }
88 }
89
90 el.addEventListener(‘touchstart‘, function(event){
91 var self = this, touchPoint = event.touches[0];
92
93 if(isStopPropagation){
94 event.stopPropagation();
95 }
96
97 if(isPreventDefault){
98 event.preventDefault();
99 }
100
101 startPoint = {
102 x: Math.floor(touchPoint.clientX),
103 y: Math.floor(touchPoint.clientY)
104 };
105
106 timer = setTimeout(function(){
107 //如果超时，清空本次touch数据
108 clearSwipe();
109 }, touch.duration);
110 });
111
112 el.addEventListener(‘touchmove‘, function(event){
113 var self = this, touchPoint = event.touches[0];
114
115 if(isStopPropagation){
116 event.stopPropagation();
117 }
118
119 if(isPreventDefault){
120 event.preventDefault();
121 }
122
123 if(startPoint){
124 endPoint = {
125 x: Math.floor(touchPoint.clientX),
126 y: Math.floor(touchPoint.clientY)
127 };
128
129 //执行swipe事件判断，是否符合触发事件
130 if(triggerOnMove){
131 if(execSwipe(self, event)){
132 clearSwipe();
133 }
134 }
135 }
136 });
137
138 el.addEventListener(‘touchend‘, function(event){
139 if(isStopPropagation){
140 event.stopPropagation();
141 }
142
143 if(isPreventDefault){
144 event.preventDefault();
145 }
146
147 execSwipe(self, event);
148 //清除本次touch数据
149 clearSwipe();
150 });
151 }
152
153 /**
154 * @param el {HTMLElement} HTML元素
155 * @param callback {Function} 事件回调函数
156 * @param options {Object} 可选参数
157 * isStopPropagation {Boolean} 是否停止冒泡，true为停止冒泡
158 * isPreventDefault {Boolean} 是否阻止默认事件，true为阻止默认事件
159 * triggerOnMove {Boolean}
160 * swipe事件有两种触发方式，一种是在touchmove过程中，只要满足滑动距离条件即触发。
161 * 一种是在touchend中，进入滑动距离判断，如果满足滑动距离触发。
162 * 默认值为false，在touchend中触发。
163 */
164 touch.swipeLeft = function(el, callback, options){
165 if(options){
166 bindSwipe(el, ‘swipeLeft‘, callback, options.triggerOnMove, options.isStopPropagation, options.isPreventDefault);
167 }else{
168 bindSwipe(el, ‘swipeLeft‘, callback);
169 }
170
171 };
172
173 touch.swipeRight = function(el, callback, options){
174 if(options){
175 bindSwipe(el, ‘swipeRight‘, callback, options.triggerOnMove, options.isStopPropagation, options.isPreventDefault);
176 }else{
177 bindSwipe(el, ‘swipeRight‘, callback);
178 }
179 };
180
181 touch.swipeUp = function(el, callback, options){
182 if(options){
183 bindSwipe(el, ‘swipeUp‘, callback, options.triggerOnMove, options.isStopPropagation, options.isPreventDefault);
184 }else{
185 bindSwipe(el, ‘swipeUp‘, callback);
186 }
187 };
188
189 touch.swipeDown = function(el, callback, options){
190 if(options){
191 bindSwipe(el, ‘swipeDown‘, callback, options.triggerOnMove, options.isStopPropagation, options.isPreventDefault);
192 }else{
193 bindSwipe(el, ‘swipeDown‘, callback);
194 }
195 };
196
197 return touch;
198 })();
199
200 // 注册jquery方法
201 if($ && $.fn){
202 $.fn.extend({
203 /**
204 * 模拟touch swipe事件，支持链式调用。
205 * @param name {String} swipe事件名称，值有swipLeft、swipeRight、swipeUp、swipeDown。
206 * @param callback {Function} swipe事件回调函数
207 * @param opts {Object} 可选参数
208 * isStopPropagation {Boolean} 是否停止冒泡，true为停止冒泡
209 * isPreventDefault {Boolean} 是否阻止默认事件，true为阻止默认事件
210 * triggerOnMove {Boolean} swipe事件有两种触发方式，一种是在touchmove过程中，只要满足滑动距离条件即触发。
211 * 一种是在touchend中，进入滑动距离判断，如果满足滑动距离触发。
212 * 默认值为false，在touchend中触发。
213 */
214 rhuiSwipe: function(name, callback, opts){
215 var fnSwipe = Rhui.mobile[name];
216
217 if(this.length > 0 && fnSwipe){
218 this.each(function(){
219 fnSwipe(this, callback, opts);
220 });
221 }
222
223 return this;
224 }
225 });
226 }
227 })(window, $);
使用实例：
.test{
width: 400px;
height: 400px;
}
Rhui.mobile.swipeUp(document.getElementById(‘div1‘), function(event){
console.log(event);
}, {
// 可选参数
isStopPropagation: true,
isPreventDefault: true,
triggerOnMove: true
});
$(‘.test‘).rhuiSwipe(‘swipeLeft‘, function(event){
console.log(event);
}, {
// 可选参数
isStopPropagation: true,
isPreventDefault: true,
triggerOnMove: true
});
实例展示：
.test{
width: 400px;
height: 400px;
}
Rhui.mobile.swipeUp(document.getElementById(‘div1‘), function(event){
console.log(event);
}, {
// 可选参数
isStopPropagation: true,
isPreventDefault: true,
triggerOnMove: true
});
$(‘.test‘).rhuiSwipe(‘swipeLeft‘, function(event){
console.log(event);
}, {
// 可选参数
isStopPropagation: true,
isPreventDefault: true,
triggerOnMove: true
});
zeptojs touch事件
zeptojs也提供了滑动事件，该滑动事件需要引用额外的touch.js。
事件描述
tap
类似PC端浏览器的鼠标点击事件，由于移动浏览器点击事件有延迟，tap提供了无延迟的点击效果。
singleTap
效果和tap一样
doubleTap
类似PC端浏览器的鼠标双击事件
longTap
长按事件，在元素上长按超过0.75秒触发。有些浏览器有默认的长按事件，可能会被覆盖。
swipe
滑动事件，该事件不考虑滑动方向。
swipeLeft
向左滑动
swipeRight
向右滑动
swipeUp
向上滑动
swipeDown
向下滑动
实例展示：
1
2
3
4
List item 1 DELETE
5
List item 2 DELETE
6
7
8
9 // show delete buttons on swipe
10 $(‘#items li‘).swipe(function(){
11 $(‘.delete‘).hide()
12 $(‘.delete‘, this).show()
13 })
14
15 // delete row on tapping delete button
16 $(‘.delete‘).tap(function(){
17 $(this).parent(‘li‘).remove()
18 })
19
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！
HTML5滑动(swipe)事件,HTML5教程 滑动（swipe）事件学习相关推荐
- html5电子杂志页面案例,html5电子杂志支持手机端触屏滑动翻书效果
特效描述:html5电子杂志 支持手机端 触屏滑动 翻书效果.html5手机电子杂志,触屏滑动电子杂志翻书动画特效 代码结构 1. 引入JS 2. HTML代码 function loadApp() ...
- linux屏幕滑动效果实现代码,使用swipe方法模拟屏幕滑动与手势密码绘制
前言 App自动化测试中有两个很重要的操作,屏幕滑动与绘制手势密码.目前很多App在启动时,都存在启动时的引导动画或者加载上下文内容时需要手动上滑或者下滑加载页面,所以在自动化测试的过程中模拟手的滑动 ...
- html5 form表单,html5 教程
2019独角兽企业重金招聘Python工程师标准>>> html5 form表单 html5 教程 html5 form表单表单介绍 1.XHTML中需要放在form之中的诸如inp ...
- html5游戏制作入门系列教程（七）
我们继续这一系列文章,使用HTML5的canvas组件进行游戏开发.我们将要更新完善我们的第4课html5游戏制作入门系列教程(四)的游戏实例,并增加了火球,敌人和碰撞检测等功能模块.所以,现在我们的 ...
- html5游戏制作入门系列教程（四）
今天,我们继续一系列文章,使用HTML5的canvas组件进行游戏开发.今天我们要学习下元素:声音控制与动画.在我们的演示中,你会 看到一个飞龙.我们会听到持续的翅膀拍打的声音(我们将循环这个声音), ...
- html5游戏制作入门系列教程（二）
今天,我们继续html5游戏制作入门系列的系列文章.今天,我们将继续基础知识(也许甚至是高级技巧的基础).我要告诉你如何具有渐变颜色填充对象,绘制文本,使用自定义的字体绘制文本,基本的动画,以及最重要 ...
- html5游戏制作入门系列教程（一）
从今天开始,我们将开始HTML5游戏开发一系列的文章.在我们的第一篇文章中,我们将讲解在画布canvas上的基础工作,创建简单的对象,填充和事件处理程序.另外,要注意在这个阶段中,我们不会立即学习We ...
- 3d布局图 html5,8个实用炫酷的HTML5图片动画应用 | HTML5资源教程
近期我们发布了不少关于 1.CSS3/jQuery实现移动端滑动图片层叠效果 这是一款基于jQuery和CSS3的图片层叠插件,这和我们之前介绍的CSS3图片层叠展开特效有点不同,它支持鼠标滑动切换图 ...
- Android进阶知识：事件分发与滑动冲突（一）
1.前言 Android学习一段时间,需求做多了必然会遇到滑动冲突问题,比如在一个ScrollView中要嵌套一个地图View,这时候触摸移动地图或者放大缩小地图就会变得不太准确甚至没有反应,这就是遇 ...
- html列表的列选择事件,html5 datalist 选中option选项后的触发事件
使用input + datalist 实现自动补全功能,其中datalist中的内容是根据input输入的内容动态变换的,代码如下 function inputSelect(){ var input_ ...
最新文章
- python3正则表达式符号和用法
- memcached 双主复制
- 正则不等于一个字符串_更正一个观念：“积食”不等于“吃多了”
- SAP UI5 应用开发教程之六十九 - 如何从 SAP UI5 Not Found 页面跳转回到正常的应用页面
- java scheduletask_spring中定时任务taskScheduler的详细介绍
- DELPHI基础教程 第七章 剪贴板和动态数据交换
- centos下安装Anaconda
- 光洋协议转换网关WTGNet-KOYO
- 应用程序无法正常启动0xc0150002 解决方案
- 宁畅g40系列服务器发布,基于第三代至强可扩展处理器，宁畅G40系列服务器正式发布...
- android 乐固渠道打包,安卓腾讯乐固（legutools）多渠道打包（友盟）
- java hypot_Java StrictMath hypot()用法及代码示例
- 使用ant直接执行shell命令
- 龙翔集团牵头起草全国首个月子中心服务等级划分团体标准开始实施
- 计算机上的be无法正常启动,应用程序无法正常启动0xc0000005的三种解决方法
- BUCK电路工作原理以及参数设计
- 对称加密和非对称加密详解
- beego环境无脑搭建
- 你猜黑客都用Linux系统还是Windows系统？
- 小程序+企业微信活码群做裂变营销的4个步骤