博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端事件
阅读量:6377 次
发布时间:2019-06-23

本文共 1330 字,大约阅读时间需要 4 分钟。

hot3.png

事件:

    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)

转载于:https://my.oschina.net/u/3419199/blog/1538246

你可能感兴趣的文章
Android studio 申请签名,设置签名key位置 查看 sha1
查看>>
sshpass工具
查看>>
浏览器渲染原理及解剖浏览器内部工作原理
查看>>
IMP数据到指定的表空间
查看>>
向大院大所要智慧——江苏创新转型扫描
查看>>
dubbo连接zookeeper注册中心因为断网导致线程无限等待问题【转】
查看>>
Spring Boot项目配置RabbitMQ集群
查看>>
版本发布后软件测试人员要做的工作
查看>>
android 壁纸设置分析
查看>>
Mysql一些重要配置参数的学习与整理(三)
查看>>
Dockerfile构建Nginx1.14环境
查看>>
bash 交互与非交互
查看>>
介绍Kubernetes监控Heapster
查看>>
linux的free、ps、netstat、tcpdump命令工具介绍
查看>>
javascript学习笔记:DOM节点关系和操作
查看>>
分布式事务
查看>>
怎么提高自身技术
查看>>
HTML5简介,C/S与B/S架构
查看>>
北京游泳馆
查看>>
linux利用rpm包安装jdk,mysql
查看>>