前端JS H5 touch事件封装,更加高效的开发移动端 - 戴向天
大家好！我叫戴向天。今天我给大家分享一个我自己封装的H5 touch事件的封装。
QQ:809002582
该方法的使用特别的简单，废话不多说。先上代码 ↓↓↓↓↓
/** 给元素绑定事件 */
function touch({dom, start, move, end, stop = true, change}) {
const f = {
data: {},
start(e) { //手指触碰的屏幕就会触发(一次)
stop && e.preventDefault() //阻止冒泡，当stop为false的时候就运行冒泡，默认为true
f.data = { //储存的是一些数据
...f.data, //扩展运算，将之前的数据进行合并
x: e.touches[0].pageX, //手指开始的横向位置
y: e.touches[0].pageY, //手指开始的纵向位置
ex: 0, //手指结束的横向位置
ey: 0, //手指结束的纵向位置
time: new Date().getTime()， //手指的开始时间
}
start && start(f.data) //执行自定义的 start 方法
},
move(e) { //多次
stop && e.preventDefault() //阻止冒泡，当stop为false的时候就运行冒泡，默认为true
f.data = { //储存的是一些数据
...f.data, //扩展运算，将之前的数据进行合并
ex: e.touches[0].pageX, //手指结束的横向位置
ey: e.touches[0].pageY, //手指结束的纵向位置
}
move && move({ //执行自定义的 move方法，并且把得到的数据进行返回
x: e.touches[0].pageX,
y: e.touches[0].pageY,
dx: f.data.ex - f.data.x,
dy: f.data.ey - f.data.y
})
},
end(e) { //手指离开屏幕就会触发(一次)
stop && e.preventDefault() //阻止冒泡，当stop为false的时候就运行冒泡，默认为true
let time = new Date().getTime() //手指离开的时间
end && end({ //执行自定义的 end 方法，并且把得到的数据进行返回
time, //当前时间
startTime: f.data.time, //手指的开始时间
dt: time - f.data.time, //手指在屏幕逗留的时间差 ms
dy: (f.data.ey || f.data.y) - f.data.y, //手指在屏幕上的纵向的移动距离
dx: (f.data.ex || f.data.x) - f.data.x //手指在屏幕上的横向的移动距离
})
// ↓ 下面的就是执行判断手指移动的方向，当达到条件，就会执行change事件，
// change 返回的参数
// direction: left | right | up | down | origin
if (new Date().getTime() - f.data.time < 300) { // 手指开屏幕上的时间很短
if (Math.abs(f.data.ex - f.data.x) > 20 && Math.abs(f.data.ex - f.data.x) > Math.abs(f.data.ey - f.data.y)) {
if (change) {
if (f.data.ex > f.data.x) {
change({
direction: 'right'
})
} else if (f.data.ex < f.data.x) {
change({
direction: 'left'
})
}
}
} else if (Math.abs(f.data.ey - f.data.y) > 20 && Math.abs(f.data.ex - f.data.x) < Math.abs(f.data.ey - f.data.y)) {
if (change) {
if (f.data.ey > f.data.y) {
change({
direction: 'down'
})
} else if (f.data.ey < f.data.y) {
change({
direction: 'up'
})
}
}
} else {
change && change({
direction: 'origin'
})
}
} else if (Math.abs(f.data.ey - f.data.y) >= 50) {
if (change) {
if (f.data.ey > f.data.y) {
change({
direction: 'down'
})
} else if (f.data.ey < f.data.y) {
change({
direction: 'up'
})
}
}
} else if (Math.abs(f.data.ex - f.data.x) >= 50) {
if (change) {
if (f.data.ex > f.data.x) {
change({
direction: 'right'
})
} else if (f.data.ex < f.data.x) {
change({
direction: 'left'
})
}
}
} else {
change && change({
direction: 'origin'
})
}
}
}
// 这里是防止dom元素绑定事件异常，导致整体页面无法正常往下执行
try {
dom.removeEventListener('touchstart', f.start)
dom.addEventListener('touchstart', f.start)
dom.removeEventListener('touchmove', f.move)
dom.addEventListener('touchmove', f.move)
dom.removeEventListener('touchend', f.end)
dom.addEventListener('touchend', f.end)
} catch (e) {
console.error('给dom元素绑定事件的时候出现了错误', e)
}
}
下面我写了一个案例的vue文件 按钮组的组件
里面的style代码是我在我写的公共样式里面进行提取出来的。
dd-img组件其实就是一个图片自适应的组件。 该组件内类容在上篇文章有过描述
该组件的使用方法
由于不知道怎么上传屏幕录制并生成GIF图。具体的效果没能展示。
下面这张图片就是该组件的效果图。
注：图片里面的小圆点的组件我没有写在代码里面
