移动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

HTML5滑动(swipe)事件的更多相关文章

  1. 移动端 之 触摸事件、Tap事件和swipe事件

    触摸事件 touch是一个事件组,意思不止一个事件,是移动端滑动事件组,touchstart touchmove touchend touchcancel touchstart 当刚刚触摸屏幕的时候触 ...

  2. H5案例分享:html5重力感应事件

    html5重力感应事件 一.手机重力感应图形分析 1.设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360). 设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐. 设备围绕z轴的旋转 ...

  3. Zepto中的Swipe事件失效

    需要阻止浏览器默认滑动的事件 document.addEventListener('touchmove', function (event) { event.preventDefault(); }, ...

  4. html5重力感应事件之DeviceMotionEvent

    前言 今天主要介绍一下html5重力感应事件之DeviceMotionEvent,之前我的一篇文章http://www.haorooms.com/post/jquery_jGestures, 介绍了第 ...

  5. HTML5服务器发送事件(Server-Send Events)

    HTML5服务器发送事件是允许获得来自服务器的更新. server-sent事件-单向传递消息,表示网页自动获取来自服务器的更新. 其中有一个重要的对象,eventsource对象是用来接收服务器发送 ...

  6. HTML5 服务器发送事件(Server-Sent Events)

    沈阳SEO:HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获 ...

  7. HTML5: HTML5 服务器发送事件(Server-Sent Events)

    ylbtech-HTML5: HTML5 服务器发送事件(Server-Sent Events) 1.返回顶部 1. HTML5 服务器发送事件(Server-Sent Events) HTML5 服 ...

  8. js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏

    /** * 页面滑动滚动事件 * @param e *///0为隐藏,1为显示var s = 1;function scrollFunc(e) { // e存在就用e不存在就用windon.event ...

  9. html5滑动事件代码

    $(".header").on("touchstart", function(e) { // 判断默认行为是否可以被禁用 if (e.cancelable) { ...

随机推荐

  1. SpringMVC问题- MultipartConfig 配置问题以及解决方式

    http://www.cnblogs.com/weilu2/p/springmvc_fileupload_with_servlet_3_0.html

  2. C#异步方法的使用

    from:http://www.myext.cn/csharp/a_6765.html 也许业内很多高不成低不就的程序员都会对一些知识点会有些迷惑,原因是平常工作用的少,所以也就决定了你对这个事物的了 ...

  3. 使用Microsoft Fakes隔离测试代码

    在单元测试(Unit Test)中我们遇到的问题之一是:假如被测试组件(类或项目)为A,组件A依赖于组件B,那么在组件A的单元测试ATest中测试A时,也需要依赖于B,在B发生改动后,就可能影响到A的 ...

  4. 用SQL命令查看Mysql数据库大小

    要想知道每个数据库的大小的话,步骤如下: 1.进入information_schema 数据库(存放了其他的数据库的信息) use information_schema; 2.查询所有数据的大小: s ...

  5. 在github分支上上传空文件夹

    GIT工具是依靠文件来识别文件夹的,对于空的文件夹是不能识别的.因此如果需要在代码中增加一个空文件夹,同时需要在文件夹中增加一个空文件.gitkeep 当批量增加空文件夹时,可以在GIT库的根目录下输 ...

  6. 【C#进阶】多播委托和委托数组像是一回事~

    这个MathOperation类有三静态方法,参数都是double,并且没有返回值,考虑用Action<>() 这种预定义的委托哦 class MathOperations { publi ...

  7. 改变this指针的apply,call,bind的区别

    apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...

  8. javascript 中的 let 作用域

    let 声明了一个块级域的局部变量,并且可以给它一个初始化值. 语法EDIT let var1 [= value1] [, var2 [= value2]] [, ..., varN [= value ...

  9. Java学习手记1——集合

    一.什么是集合 集合是对象的集合,就像数组是数的集合.集合是一种容器,可以存放对象(可以是不同类型的对象). 二.集合的优点(为什么要用集合) 当然,在java里,可以使用数组来存放一组类型相同的对象 ...

  10. String 与StringBuilder有什么区别

    C# String 对象是不可改变的.每次使用 System.String 类中的方法之一时,都要在内存中创建一个新的字符串对象,这就需要为该新对象分配新的空间.在需要对字符串执行重复修改的情况下,与 ...