HTML5滑动（swipe）事件
2024-08-24 18:56:33
移动H5开发中经常用到滑动效果（页面上移、下移、向左滑动、向右滑动等），浏览器并没有内置swipe事件，可以通过touch事件（touchstart、touchmove和touchend）模拟swipe效果。jQuery mobile和zeptojs提供了swipe事件。jquery mobile只有swipeLeft和swipeRight，zeptojs提供了完整的tap和swipe事件。
/**
* @author accountwcx@qq.com
* http://git.oschina.net/accountwcx/rhui
*
* swipe事件，包括swipeLeft、swipeRight、swipeUp、swipeDown。
* 调用方法
* Rhui.mobile.swipeLeft(el, callback, options)
* Rhui.mobile.swipeRight(el, callback, options)
* Rhui.mobile.swipeUp(el, callback, options)
* Rhui.mobile.swipeDown(el, callback, options)
* 如果使用jQuery，调用方法
* $(el).rhuiSwipe('swipeLeft', callback, options);
* $(el).rhuiSwipe('swipeRight', callback, options);
* $(el).rhuiSwipe('swipeUp', callback, options);
* $(el).rhuiSwipe('swipeDown', callback, options);
*/
(function(window, $){
var Rhui = window.Rhui || {};
window.Rhui = Rhui;
Rhui.mobile = (function(){
var touch = {
distance: 30, //滑动距离，超过该距离触发swipe事件，单位像素。
duration: 1000 //滑动时长，超过该时间不触发swipe，单位毫秒。
}; /**
* 绑定事件
* @param el 触发事件的元素
* @param swipe 事件名称，可选值为swipeLeft,swipeRight,swipeUp,swipeDown
* @param callback 事件回调函数
* @param isStopPropagation 是否停止冒泡，true为停止冒泡
* @param isPreventDefault 是否阻止默认事件，true为阻止默认事件
* @param triggerOnMove swipe事件有两种触发方式，一种是在touchmove过程中，只要满足滑动距离条件即触发。
* 一种是在touchend中，进入滑动距离判断，如果满足滑动距离触发。
* 默认是在touchend中触发。
*/
function bindSwipe(el, swipe, callback, triggerOnMove, isStopPropagation, isPreventDefault){
var startPoint, endPoint, timer; /**
* 计算滑动方向
* 首先根据x方向和y方向滑动的长度决定触发x方向还是y方向的事件。
* 然后再判断具体的滑动方向。
* 如果滑动距离不够长，不判断方向。
*/
function swipeDirection(x1, y1, x2, y2){
var diffX = x1 - x2,
diffY = y1 - y2,
absX = Math.abs(diffX),
absY = Math.abs(diffY),
swipe; if(absX >= absY){
if(absX >= touch.distance){
swipe = diffX > 0 ? 'swipeLeft' : 'swipeRight';
}
}else{
if(absY >= touch.distance){
swipe = diffY > 0 ? 'swipeUp' : 'swipeDown';
}
} return swipe;
} // 清除本次滑动数据
function clearSwipe(){
startPoint = undefined;
endPoint = undefined; if(timer !== undefined){
clearTimeout(timer);
timer = undefined;
}
} /**
* 判断是否符合条件，如果符合条件就执行swipe事件
* @param el {HTMLElement} 元素
* @param event {Event} Touch原始事件
* @param return 如果执行了事件，就返回true。
*/
function execSwipe(el, event){
if(startPoint && endPoint && swipeDirection(startPoint.x, startPoint.y, endPoint.x, endPoint.y) === swipe){
callback.call(el, event);
return true;
}
} el.addEventListener('touchstart', function(event){
var self = this, touchPoint = event.touches[0]; if(isStopPropagation){
event.stopPropagation();
} if(isPreventDefault){
event.preventDefault();
} startPoint = {
x: Math.floor(touchPoint.clientX),
y: Math.floor(touchPoint.clientY)
}; timer = setTimeout(function(){
//如果超时，清空本次touch数据
clearSwipe();
}, touch.duration);
}); el.addEventListener('touchmove', function(event){
var self = this, touchPoint = event.touches[0]; if(isStopPropagation){
event.stopPropagation();
} if(isPreventDefault){
event.preventDefault();
} if(startPoint){
endPoint = {
x: Math.floor(touchPoint.clientX),
y: Math.floor(touchPoint.clientY)
}; //执行swipe事件判断，是否符合触发事件
if(triggerOnMove){
if(execSwipe(self, event)){
clearSwipe();
}
}
}
}); el.addEventListener('touchend', function(event){
if(isStopPropagation){
event.stopPropagation();
} if(isPreventDefault){
event.preventDefault();
} execSwipe(self, event);
//清除本次touch数据
clearSwipe();
});
} /**
* @param el {HTMLElement} HTML元素
* @param callback {Function} 事件回调函数
* @param options {Object} 可选参数
* isStopPropagation {Boolean} 是否停止冒泡，true为停止冒泡
* isPreventDefault {Boolean} 是否阻止默认事件，true为阻止默认事件
* triggerOnMove {Boolean}
* swipe事件有两种触发方式，一种是在touchmove过程中，只要满足滑动距离条件即触发。
* 一种是在touchend中，进入滑动距离判断，如果满足滑动距离触发。
* 默认值为false，在touchend中触发。
*/
touch.swipeLeft = function(el, callback, options){
if(options){
bindSwipe(el, 'swipeLeft', callback, options.triggerOnMove, options.isStopPropagation, options.isPreventDefault);
}else{
bindSwipe(el, 'swipeLeft', callback);
} }; touch.swipeRight = function(el, callback, options){
if(options){
bindSwipe(el, 'swipeRight', callback, options.triggerOnMove, options.isStopPropagation, options.isPreventDefault);
}else{
bindSwipe(el, 'swipeRight', callback);
}
}; touch.swipeUp = function(el, callback, options){
if(options){
bindSwipe(el, 'swipeUp', callback, options.triggerOnMove, options.isStopPropagation, options.isPreventDefault);
}else{
bindSwipe(el, 'swipeUp', callback);
}
}; touch.swipeDown = function(el, callback, options){
if(options){
bindSwipe(el, 'swipeDown', callback, options.triggerOnMove, options.isStopPropagation, options.isPreventDefault);
}else{
bindSwipe(el, 'swipeDown', callback);
}
}; return touch;
})(); // 注册jquery方法
if($ && $.fn){
$.fn.extend({
/**
* 模拟touch swipe事件，支持链式调用。
* @param name {String} swipe事件名称，值有swipLeft、swipeRight、swipeUp、swipeDown。
* @param callback {Function} swipe事件回调函数
* @param opts {Object} 可选参数
* isStopPropagation {Boolean} 是否停止冒泡，true为停止冒泡
* isPreventDefault {Boolean} 是否阻止默认事件，true为阻止默认事件
* triggerOnMove {Boolean} swipe事件有两种触发方式，一种是在touchmove过程中，只要满足滑动距离条件即触发。
* 一种是在touchend中，进入滑动距离判断，如果满足滑动距离触发。
* 默认值为false，在touchend中触发。
*/
rhuiSwipe: function(name, callback, opts){
var fnSwipe = Rhui.mobile[name]; if(this.length > 0 && fnSwipe){
this.each(function(){
fnSwipe(this, callback, opts);
});
} return this;
}
});
}
})(window, $);
使用实例：
<style type="text/css">
.test{
width: 400px;
height: 400px;
}
</style>
<div id="div1" class="test"></div>
<div class="test"></div> <script type="text/javascript">
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
});
</script>
实例展示：
<style type="text/css">
.test{
width: 400px;
height: 400px;
}
</style>
<div id="div1" class="test"></div>
<div class="test"></div> <script type="text/javascript">
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
});
</script>
zeptojs touch事件
zeptojs也提供了滑动事件，该滑动事件需要引用额外的touch.js。
| 事件 | 描述 |
|---|---|
| tap | 类似PC端浏览器的鼠标点击事件，由于移动浏览器点击事件有延迟，tap提供了无延迟的点击效果。 |
| singleTap | 效果和tap一样 |
| doubleTap | 类似PC端浏览器的鼠标双击事件 |
| longTap | 长按事件，在元素上长按超过0.75秒触发。有些浏览器有默认的长按事件，可能会被覆盖。 |
| swipe | 滑动事件，该事件不考虑滑动方向。 |
| swipeLeft | 向左滑动 |
| swipeRight | 向右滑动 |
| swipeUp | 向上滑动 |
| swipeDown | 向下滑动 |
实例展示：
<style>.delete { display: none; }</style>
<ul id=items>
<li>List item 1 <span class=delete>DELETE</span></li>
<li>List item 2 <span class=delete>DELETE</span></li>
</ul>
<script>
// show delete buttons on swipe
$('#items li').swipe(function(){
$('.delete').hide()
$('.delete', this).show()
})
// delete row on tapping delete button
$('.delete').tap(function(){
$(this).parent('li').remove()
})
</script>
本文摘自死神的丧钟 http://blog.csdn.net/accountwcx/article/details/49334091
最新文章
- Chrome 控制台实用指南
- English Training Material - 02
- 学习XML总结
- adb getprop setprop watchprop用法
- MD5加密运算
- android fragment 跳到另一个fragment
- SilkTest Q&A 3
- 最小生成树Prim
- 说说ajax上传数据和接收数据
- angular学习（七）-- Service
- Spring data Redis
- 行为驱动：Cucumber + Selenium + Java(四) - 实现测试用例的参数化
- 如何把ppt写好
- Python爬虫:更加优雅的执行JavaScript(PyV8)
- Git忽略提交规则 - .gitignore配置运维总结
- css概括
- sass和less
- 使用github的srs代码，搭建 RTMP_Server
- pyqt 实现的俄罗斯方块
- 初识Tarjan算法
热门文章
- Python_转义字符
- WPF打包32位和64位程序 运行在ghost WIN7上问题
- 网页3D引擎“Babylon.JS”入门教程翻译总结
- Socket与Http通信
- Leetcode: Sequence Reconstruction
- IOS开发UISearchBar失去第一响应者身份后，取消按钮不执行点击事件的问题
- java List<Item> its=new ArrayList<Item>(); Map按value中的某字段排序
- SQL中EXISTS的用法
- 相机拍的图，电脑上画的图，word里的文字，电脑屏幕，手机屏幕，相机屏幕显示大小一切的一切都搞明白了！
- 通过队列解决Lucene文件并发创建索引