事件:
PC:click、mouseover、mouseout、mouseenter、mouseleave、mousemove、mousedown、mouseup、mousewheel、keydown、keyup、load、scroll、blur、focus、change......
移动端:click(单击)、load、scroll、blur、focus、change、input(代替keyup,keydown)...Touch事件模型(处理单手指操作)、GESTURE事件模型(处理多手指操作)、
TOUCH:touchstart、touchmove、touchend、touchcancle
GESTRUE:gesturestart、gesturechange、gestureend
1、click:在移动端click属于单击事件,不是点击事件,在移动端的项目中我们经常会区分单击做什么和双击做什么,所以移动端的浏览器在识别click的时候,只有确定是单击后才会触发执行;在移动端使用click会存在300ms的延迟:浏览器在第一次点击结束后,还需要等待300ms看是否触发了第二次点击,如果触发了第二次点击就不属于click了,没有触发第二次点击才属于click; fastclick插件解决移动端的click300ms的延迟 FastClick.attach(document.body):原理是用的事件委托
这里输入代码
2、点击、单击、双击、长按、滑动、左滑、右滑、上滑、下滑... 单击和双击(300ms) 点击和长按(750ms) 点击和滑动(偏移的X/Y的距离是否在30px以内,超过就是滑动) 左右滑动和上下滑动(X轴偏移的距离 > Y轴偏移的距离 = 左右滑,相反就是上下滑) 左滑和右滑(偏移的距离 > 0 = 右滑 相反就是左滑)
3、移动端事件库: FastClick.js:解决click事件的300ms的延迟; touch.js:百度云手势事件库 hammer.js Zepto.js:被誉为移动端的小型JQ ,JQ由于是在PC端使用的,所以代码中包含了大量的对于IE低版本浏览器的兼容处理,而zepto.js之应用于移动端开发,所以在JQ的基础上没有对低版本的浏览器进行支持 JQ中提供了很多的选择器类型及DOM操作方法,但是zepto中只是实现了部分常用的选择器和方法
zepto专门为移动端开发而诞生,所以相对于JQ来说更适合移动端:zepto的animate动画方法支持了css3动画的操作zepto专门的准备了移动端常用的事件操作:tap、singleTap、doubleTap、longTap、swipe、swipeUp、swipeDown、swipeLeft、swipeRight......在移动端开发中,使用position:fixed固定单位,很多的手机都支持不好,尤其是在定位的区域还需要输入内容到跑去虚拟键盘的时候会出现许多的问题解决问题: 使用局部滚动处理(ISCROLL)