移动端事件基础总结

最新推荐文章于 2021-07-22 22:02:06 发布

youhebuke225

最新推荐文章于 2021-07-22 22:02:06 发布

阅读量303

点赞数

分类专栏：移动端文章标签： dom

本文链接：https://blog.csdn.net/youhebuke225/article/details/106449969

版权

移动端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

移动端事件总结

1. click

click事件在移动端使用是会有300ms左右的延迟，但是可以通过第三方的库进行解决详情点击

2. touch事件模型

共四种:只在移动端触发

touchstart:手指触摸到屏幕会触发
touchmove:当手指在屏幕上移动时，会触发
touchend:当手指离开屏幕时，会触发
touchcancel:可由系统进行的触发,一些更高级别的事件发生时（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作

box.ontouchstart = function(){
	//dosomethings...
}
//或者
box.addEventListener('touchstart',function(){
	//dosomethings...
})
//目前移动端只有这些事件，像zepto的tap事件，是对于他的封装

3. TouchEvent

我们先打印一下event

box.addEventListener('touchstart',function(event){
	console.log(event)
})

打印带出来是这个样子的

在这里插入图片描述

3.1 触摸相关属性

1 .touches

当前屏幕上所有触摸点的列表
- 当一个手指在触屏上时，event.touches.length=1
- 当两个手指在触屏上时，event.touches.length=2，以此类推

2. changedTouches

导致触摸事件被触发的触摸点数组

3. targetTouches

当前对象上所有触摸点的列表

三者的区别

用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。
用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。
- 当两个手指触摸相同元素时，
  targetTouches和touches的值相同，否则targetTouches 只有一个值。
- changedTouches此时只有一个值，
  为第二个手指的触摸点，因为第二个手指是引发事件的原因
用两个手指同时接触屏幕，此时changedTouches有两个值，每一个手指的触摸点都有一个值
手指滑动时，三个值都会发生变化
一个手指离开屏幕，touches和targetTouches中对应的元素会同时移除，而changedTouches仍然会存在元素。
手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值，
此值为最后一个离开屏幕的手指的接触点。