HTML5滑动（swipe）事件
移动H5开发中经常用到滑动效果（页面上移、下移、向左滑动、向右滑动等），浏览器并没有内置swipe事件，可以通过touch事件（touchstart、touchmove和touchend）模拟swipe效果。jquery mobile和zeptojs提供了swipe事件。jquery mobile只有swipeLeft和swipeRight，zeptojs提供了完整的tap和swipe事件。
/**
* @author [email protected]
* 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>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>DELETEspan>li>
<li>List item 2 <span class=delete>DELETEspan>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>