视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
详细介绍JavaScript移动端事件的基础及对常用事件库的总结
2020-11-27 20:14:17 责编:小OO
文档


这篇文章主要为大家详细介绍了js移动端事件基础及常用事件库,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

一、事件基础

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、touchcancel

GESTURE:gesturestart、gesturechange、gestureend

1、click:在移动端click属于单击事件,不是点击事件,在移动端的项目中我们经常会区分单击做什么和双击做什么,所以移动端的浏览器在识别click的时候,只有确定是单击后才会把它执行:

在移动端使用click会存在300ms的延迟:浏览器在第一次点击结束后,还需要等到300ms看是否触发了第二次点击,如果触发了第二次点击就不属于click了,没有触发第二次点击才属于click

下面代码是移动端模拟click时间的代码

同时也可以使用fastclick.js来解决移动端click事件的300ms延迟 (github地址https://github.com/zhouxiaotian/fastclick)

2、点击、单击、双击、长按、滑动、左滑、右滑、上滑、下滑

单击和双击(300MS)

点击和长按(750MS)

点击和滑动(X/Y轴偏移的距离是否在30PX以内,超过30PX就是滑动)

左右滑动和上下滑动(X轴偏移的距离 > Y轴偏移的距离 = 左右滑 相反就是上下滑)

左滑和右滑(偏移的距离 >0 = 右滑 相反就是左滑)

二、常用的事件库

FastClick.js :解决CLICK事件300MS的延迟

TOUCH.js:百度云移动手势库 GitHub地址 https://github.com/Clouda-team/touch.code.baidu.com

实例如下:  

HAMMER.js

Zepto.js:被誉为移动端的小型JQ,JQ由于是在PC端使用的,所以代码中包含了大量对于ie低版本浏览器的兼容处理,而ZEPTO只应用在移动端开发,所以在JQ的基础上没有对低版本的ie进行支持

  JQ中提供了很多的选择器类型及DOM操作方法,但是ZEPTO只是实现了部分常用的选择器和方法。例如:JQ中的动画方法有animate、hide、show、fadeIn、fadeOut、fadeToggle、slideDown、slideUp、slideToggle...但是在ZEPTO中只有animate

  ZEPTO的源代码大小比JQ小很多

  ZEPTO专门为移动端开发而诞生,所以相对于JQ来说更适合移动端:

  ZEPTO的animate动画方法支持了CSS3动画的操作

  ZEPTO专门的准备了移动端常用 的事件操作:tap、singleTap、doubleTap、longTap、swipe、swipeUp、swipeDown、swipeLeft、swipeRight

实例代码如下:  

下载本文
显示全文
专题