目录
概念
- 在JavaScript中，移动端基本的手指触摸touch事件有四种，分别为：
- touchstart : 手指触摸屏幕时触发
- touchend : 手指离开屏幕的时候触发
- touchmove : 手指在屏幕上移动时触发
- touchcancel : 手指被迫中断触摸屏幕的时候触发
为了让下面的事件方法易于展示，我们可以先给HTML中的body标签写上高度
<style>
body{
height: 500px;
}
</style>
以下是 touchstart, touchend, touchmove 和 touchcancel 事件的简单应用
touchstart 触摸发生事件
<script>
// 为body标签添加touchstart事件监听
document.body.addEventListener('touchstart', function(e){
console.log(e, '手指摸到屏幕');
})
</script>
touchend 触摸结束事件
<script>
// 为body标签添加touchend事件监听
document.body.addEventListener('touchend', function(e){
console.log(e, '手指离开屏幕');
})
</script>
touchmove 触摸移动事件
<script>
// 为body标签添加touchmove事件监听
document.body.addEventListener('touchmove', function(e){
console.log(e, '手指在屏幕上移动');
})
</script>
touchcancel 触摸取消事件
<script>
// 为body标签添加touchcancel事件监听
setTimeout(() => {
alert('定时器触发')
}, 2000)
document.body.addEventListener('touchcancel', function (e) {
console.log(e, '手指在屏幕上取消')
})
</script>
以下是综合运用 touchstart, touchend, touchmove 和 touchcancel 事件来自定义创建touch事件
自定义事件
- 这里的自定义事件是指：通过运用 touchstart, touchend, touchmove 和 touchcancel 事件方法的各种结合来自定义创建其他touch事件
自定义轻触事件方法touchtap
<script>
// 自定义创建轻触事件方法touchtap
function touchtap(dom, fn) {
var startTime // 声明触摸发生的时间
var endTime // 声明触摸结束的时间
var isMove // 判断触摸是否发生了移动
// touchstart
dom.addEventListener('touchstart', function (e) {
// 记录触摸发生的时间
startTime = new Date().getTime()
isMove = false
})
// touchmove
dom.addEventListener('touchmove', function (e) {
isMove = true
})
// touchend
dom.addEventListener('touchend', function (e) {
// 记录触摸结束的时间
endTime = new Date().getTime()
if (endTime - startTime < 150 && isMove == false) {
// 符合轻触事件后执行的方法fn()
fn()
}
})
}
// 使用轻触事件方法
touchtap(document.body, () => {
console.log('轻触发生了')
})
</script>
自定义左右划动事件方法touchswiper
<script>
// 自定义创建左右划动事件方法
function touchswiper(dom, fn) {
// 定义一个变量用来记录手指按下时，手指距离屏幕左侧的距离
var startLocation // 声明触摸的开始坐标
var endLocation // 声明触摸的结束坐标
// touchstart
dom.addEventListener('touchstart', function (e) {
// 获取触摸的开始坐标
startLocation = e.touches[0].pageX
})
// touchend
dom.addEventListener('touchend', function (e) {
// 获取触摸的结束坐标
endLocation = e.changedTouches[0].pageX
// 触摸的结束坐标小于开始坐标即为左划
if (endLocation < startLocation) {
// 符合左划动事件后执行的方法fn()
fn('向左')
}
// 触摸的结束坐标大于开始坐标即为右划
if (endLocation > startLocation) {
// 符合右划动事件后执行的方法fn()
fn('向右')
}
})
}
// 使用左右划动事件方法
touchswiper(document.body, (direction) => {
console.log(direction + '划动')
})
</script>