简单封装的一个web的手势，tab和swipe，里面的具体数值都是自定义上去的，没有实际的标准，可以自行去修改都行
前两个是详解，js插件在最后一部分代码
//封装web的tab步骤详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 标准理想视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tab单击事件封装</title>
<style>
div {
width: 200px;
height: 200px;
background-color: #0a0;
margin: 100px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<script>
// 封装web的单击tab事件。详解
// 0 接触到的事件是touchstart 和 touchend
// 1 首先，点击到松开的时间不能过长，300ms左右
// 2 点击的时候，移动距离不能大于5px
// 获取元素
var div = document.querySelector('div');
// 定义变量去接收时间和开始的xy位置
var startTime, startX, startY;
// 按下事件
div.addEventListener('touchstart', function (e) {
// 判断手指的个数
if(e.touches.length>1){
return;
}
// 获取按下的时间
startTime = Date.now();
// 获取到按下的视口位置
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
})
// 离开事件
div.addEventListener("touchend", function (e) {
// 判断手指的个数
if(e.changedTouches.length>1){
return;
}
// 获取离开时候的时间
var endTime = Date.now();
// 判断，先判断时间
if (endTime - startTime > 300) {
return;
}
// 获取离开时候的位置
var endX = e.changedTouches[0].clientX;
var endY = e.changedTouches[0].clientY;
// 判断位置
if (Math.abs(endX - startX) > 5 || Math.abs(endY - startY) > 5) {
return;
}
console.log("我被点击了")
})
</script>
<script>
// 封装swipe函数的详解
// 0 涉及到事件 touchstart和 touchend
// 1 滑动的时候，时间不能过长 大约800ms
// 2 滑动的时候，距离必须大于5px
// 先判断距离，然后判断滑动的方向
// X轴 结束方向大于开始方向，right，反之left
// Y轴 结束方向大于开始方向，down，反之up
// 获取dom元素
div = document.querySelector('div');
// 定义变量接受开始的时间和位置
var startTime, startX, startY;
// 按下事件
div.addEventListener("touchstart", function (e) {
// 判断手指个数
if(e.touches.length>1){
return;
}
// 获取按下的时间
startTime = Date.now();
// 获取按下的位置
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
})
// 离开事件
div.addEventListener("touchend", function (e) {
// 判断手指个数
if(e.changedTouches.length>1){
return;
}
// 获取离开时候的时间
var endTime = Date.now();
// 判断时间
if(endTime - startTime > 800){
return;
}
// 获取离开时候的位置
var endX = e.changedTouches[0].clientX;
var endY = e.changedTouches[0].clientY;
// 定义变量接受方向
var direction;
// 先判断距离
if(Math.abs(endX-startX)>5){
direction = endX>startX? "right":"left";
}
if(Math.abs(endY-startY)>5){
direction = endY>startY? "down":"up";
}
console.log(direction);
})
</script>
最后封装成的插件js：
// 简单封装的移动web的tab和swipe插件
//函数名为 webM，可自行修改；
function webM(selector) {
// 获取dom元素
var dom = document.querySelector(selector);
return {
tab: function (cb) {
// 封装web的单击tab事件。详解
// 0 接触到的事件是touchstart 和 touchend
// 1 首先，点击到松开的时间不能过长，300ms左右
// 2 点击的时候，移动距离不能大于5px
// 获取元素
var div = document.querySelector('div');
// 定义变量去接收时间和开始的xy位置
var startTime, startX, startY;
// 按下事件
div.addEventListener('touchstart', function (e) {
// 判断手指的个数
if(e.touches.length>1){
return;
}
// 获取按下的时间
startTime = Date.now();
// 获取到按下的视口位置
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
})
// 离开事件
div.addEventListener("touchend", function (e) {
// 判断手指的个数
if(e.changedTouches.length>1){
return;
}
// 获取离开时候的时间
var endTime = Date.now();
// 判断，先判断时间
if (endTime - startTime > 300) {
return;
}
// 获取离开时候的位置
var endX = e.changedTouches[0].clientX;
var endY = e.changedTouches[0].clientY;
// 判断位置
if (Math.abs(endX - startX) > 5 || Math.abs(endY - startY) > 5) {
return;
}
cb();
})
return this;
},
swipe: function (cb) {
// 封装swipe函数的详解
// 0 涉及到事件 touchstart和 touchend
// 1 滑动的时候，时间不能过长 大约800ms
// 2 滑动的时候，距离必须大于5px
// 先判断距离，然后判断滑动的方向
// X轴 结束方向大于开始方向，right，反之left
// Y轴 结束方向大于开始方向，down，反之up
// 获取dom元素
div = document.querySelector('div');
// 定义变量接受开始的时间和位置
var startTime, startX, startY;
// 按下事件
div.addEventListener("touchstart", function (e) {
// 判断手指个数
if (e.touches.length > 1) {
return;
}
// 获取按下的时间
startTime = Date.now();
// 获取按下的位置
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
})
// 离开事件
div.addEventListener("touchend", function (e) {
// 判断手指个数
if (e.changedTouches.length > 1) {
return;
}
// 获取离开时候的时间
var endTime = Date.now();
// 判断时间
if (endTime - startTime > 800) {
return;
}
// 获取离开时候的位置
var endX = e.changedTouches[0].clientX;
var endY = e.changedTouches[0].clientY;
// 定义变量接受方向
var direction;
// 先判断距离
if (Math.abs(endX - startX) > 5) {
direction = endX > startX ? "right" : "left";
}
if (Math.abs(endY - startY) > 5) {
direction = endY > startY ? "down" : "up";
}
cb(direction);
})
return this;
}
}
}