本文共 2264 字，大约阅读时间需要 7 分钟。

移动端基础事件

手指按下：touchstart <==> mousedown手指抬起：touchend <==> mouseup手指移动：touchmove <==> mousemove

——touch事件 在chrome的模拟器下，部分版本通过on的方式来添加事件无效，有时候时好时坏，on的方式还会出现事件覆盖

1) 不会存在前后覆盖问题2) 在chrome的模拟器下可以一直识别3) false-冒泡,true-捕获        **冒泡**：点击元素，它会把一个事件一直向上传递，从下向上传递        **捕获**：从上向下传递4) 事件函数中 默认的第一个参数是event对象5) e.preventDefault()：阻止默认事件        阻止掉 document touchstart的默认事件，可以解决：        ①阻止页面上文字被选中，②阻止页面上的系统菜单        隐患：页面上的所有滚动条失效6) e.stopPropagation()：阻止冒泡事件7) 阻止document的touchmove或者touchstart，可以清除系统默认的回弹

——事件点透：PC端的鼠标事件 在移动端也可以正常使用，但是注意：事件的执行会有300ms的延迟

我们点击了页面后，浏览器会记录点击下去的坐标，然后300ms后，在该坐标找到现在在这里的元素 执行事件解决办法：1) 阻止默认事件(部分安卓机型不支持)                   2) 不在移动端使用鼠标事件，不用a标签做页面跳转

——touchEvent

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

滑屏原理

① 手指按下去的时候，记录下手指坐标② 移动的时候，记录下手指坐标③ 用移动后的坐标 - 移动前的坐标 = 手指移动的距离④ 手指按下去的时候，记录下元素的位置⑤ 移动之后，用手指移动的距离 + 元素的初始位置 = 元素现在所要在的位置

transform 与 transition

（1）transform/-webkit-transform（移动端）：		rotate：旋转 deg（度数）		scale：缩放		scaleX：X缩放		scaleY：Y缩放		translateX：X位移（px）		translateY：Y位移（px）		skewX：x斜切（度数）		skewY：y斜切（度数）（2）transition：		transition-duration：动画时间		transition-delay：延迟时间		transition-property：要动画的样式		transtion-timing-function：动画形式

无缝滑屏自动播放幻灯片

function cssTransform(el, attr, val){
   	if(!el.transform){
   	        el.transform = {
   };	}	if(arguments.length>2){
   		el.transform[attr] = val;		// console.log(el.transform);		var sVal = '';		for(var s in el.transform){
   			switch(s){
   				case 'rotate':				case 'skewX':				case 'skewY':					sVal += s+'('+el.transform[s]+'deg) ';					break;				case 'translateX':				case 'translateY':					sVal += s+'('+el.transform[s]+'px) ';					break;				case 'scaleX':				case 'scaleY':				case 'scale':					sVal += s+'('+el.transform[s]+') ';					break;			}			// console.log(sVal);			el.style.WebkitTransform = el.style.transform = sVal;		}	}else{
   		var val = el.transform[attr];		if(typeof val == 'undefined'){
   			if(['scale', 'scaleX', 'scaleY'].indexOf(attr)>-1){
   				val = 1;			}else{
   				val = 0;			}		}		return val;	}}

转载地址：https://blog.csdn.net/yangwei234/article/details/84934681 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！