移动端之封装个tap()事件

封装tap()

前面有说过mouse事件在移动端有300ms的延迟,对于用户来说体验非常不好,幸好,移动端有自己touch事件,然而它并没有"手指点击"这样的事件,所以,我们有必要封装一个类似于pc端的点击事件.

function tap(el,fn){
	var isTap = true;
	//fn.call(el) 修改函数调用时 this的指向,this在call中执行我们的第0个参数
	el.addEventListener('touchmove', function(e) {
		isTap = false;	
	});
	el.addEventListener('touchend', function(e) {
		if(isTap){
			fn&&fn.call(el,e);	
		}
		isTap = true; //注意闭包啊摔
	});
}

touchEvent需要注意的...

• changedTouches 触发当前事件的手指列表
• targetTouches 当前元素上的手指列表
• touches 当前屏幕上的手指列表

---

移动端滑屏封装

滑屏思路:

1. 按下时记录手指的初始坐标
2. move记录手指的当前坐标
3. 当前坐标 - 初始坐标 = 移动距离
4. 用按下时元素初始坐标 + 移动距离 = 元素的当前位置

这里要说一下,有多种方式改变元素的位置: ①margin ② transform ③定位
,这还牵扯到"重绘"和"回流"的问题.

元素left 和top值的改变 会影响到回流和重绘,降低性能
元素的计算属性都是通过Pc的内存计算得来的,所以内存不够的话,电脑性能也不好
所以在移动端,推荐使用transform:translate来减少回流和重绘
手机的内存比电脑的内存小很多,所以本来性能就比电脑弱,就更应该选择transform了

移动端的3d事件会触发3d硬件加速,性能会提高,这又是移动端使用transform的一个理由