移动端基础

• 移动端的一些记录

背景

• 移动端没有鼠标，mouseXXX事件行为兼容性差，移动端的操作基本靠手指操作
• 移动端没有物理键盘，靠虚拟键盘
• keydown,keyup,keypress在移动端兼容不好，监听键盘输入统一使用input事件
• PC端很难出现双击事件，单机做什么，大部分是单击触发。移动端，单双击差异明显
• 移动端和PC端在一些常规事件上是一致的，都有load事件，resize,blur,focus

移动端300ms延迟

• 产生原因
• 产生原因和解决
• 原因：PC端的click事件是点击（不是单击），dblclick是双击 ；
• 在移动端，浏览器把click事件行为定义为单击（不是点击），也就是间隔一定时间内（300MS）如果只触发一次点击，则为单击，否则则为双击

fastclick.js

• fastclick.js主要用来解决移动端click事件行为的300MS延迟的
• 原理：基于事件委托，把指定容器中的click行为统一替换为touch行为，从而去解决300MS延迟的问题
• 使用：FastClick.attach(document.body)
• 长按的时间区分是：750ms

移动端单手指操作事件模型 touch

• touchstart 手指按下
• touchmove 手指移动
• touchend 手指松开
• touchcancel 因意外原因导致操作中断
• TouchEvent
  • ev.changedTouches / ev.touches 都是记录手指操作的相关信息，是一个集合
  • ev.changedTouches[0]记录第一根手指操作的信息
  • touches在touchend事件中是无法获取的，因为它要求手指必须在屏幕上才可以获取到对应的内容，
  • 而changedTouches记录的是手指改变的信息，在三个事件行为中皆可以获取到

移动端移动div

<div class="box" id="box"></div>
.box {
			position: absolute;
			top: 0;
			left: 0;
			width: 100px;
			height: 100px;
			background: lightblue;
		}
复制代码

box.addEventListener('touchstart', function (ev) {
	let point = ev.changedTouches[0];
	this.startX = point.clientX; //手指起始位置
	this.startY = point.clientY;
	this.startL = this.offsetLeft; // 盒子起始位置
	this.startT = this.offsetTop;
	this.isMove = false;
});
box.addEventListener('touchmove', function (ev) {
	let point = ev.changedTouches[0];
	// 计算手指滑动的偏移差（我们会给予用户一定的操作误差，一般是10px或者30px的滑动内，都不认为是滑动操作）
	this.changeX = point.clientX - this.startX;
	this.changeY = point.clientY - this.startY;
	if (Math.abs(this.changeX) > 10 || Math.abs(this.changeY) > 10) {
		this.isMove = true;
		// 控制盒子跟着移动
		let curL = this.changeX + this.startL,
			curT = this.changeY + this.startT;
		this.style.cssText = `left:${curL}px;top:${curT}px`;
	}
});
box.addEventListener('touchend', function (ev) {
	let point = ev.changedTouches[0];
	if (!this.isMove) {
		console.log('当前操作为点击操作！');
		return;
	}
	if (Math.abs(this.changeX) >= Math.abs(this.changeY)) {
		if (this.changeX < 0) {
			console.log('当前操作为滑动操作：左');
		} else {
			console.log('当前操作为滑动操作：右');
		}
	} else {
		if (this.changeY < 0) {
			console.log('当前操作为滑动操作：上');
		} else {
			console.log('当前操作为滑动操作：下');
		}
	}
});

复制代码