移动端事件及事件应用
来源:互联网 发布:淘宝订单号泄漏 编辑:程序博客网 时间:2024/05/21 02:52
1.移动端事件基础
2.移动端常用的事件库
3.移动端轮播图css样式和响应
4.移动端轮播图图片延迟加载
PC端常用事件
移动端常用事件
touch事件模型
gesture事件模型
touch事件的属性:
changedTouches和touches都是手指信息的集合(TouchList),touches获取到值的必备条件是只有手指还在屏幕上才可以获取,所以在touchend事件中如果想获取离开的瞬间坐标只能用changedTouches获取
click
在移动端属于单击事件,不是点击事件, 在移动端的项目中经常会区分单击做什么和双击做什么,所以移动端的浏览器在识别click的时候,只有确定是单击后才会把它执行。在移动端使用click会存在300ms的延迟,浏览器在第一次点击结束后还需要等待300ms,看是否触发了第二次点击,如果触发了第二次,就不属于click了,没有触发第二次才属于click。
例如:点击方块,旋转一周:
效果图:
使用click:
<script type="text/javascript"> var oBox = document.querySelector("#box"); oBox.addEventListener("click", function () { this.style.webkitTransform = "rotate(360deg)"; }, false);</script>
使用touch:
发生滑动,变成红色;点击旋转:
<script type="text/javascript"> function on(curEle, type, fn) { curEle.addEventListener(type, fn, false); } var oBox = document.querySelector("#box"); //使用touch事件模型模拟实现点击事件操作,包含点击和双击 on(oBox, "touchstart", function (ev) { var point = ev.touches[0]; this["strX"] = point.clientX; this["strY"] = point.clientY; this["isMove"] = false; }); on(oBox, "touchmove", function (ev) { var point = ev.touches[0]; var newX = point.clientX, newY = point.clientY; //判断是否发生滑动,需要判断偏移的值是否在30px以内 if (Math.abs(newX - this["strX"]) > 30 || Math.abs(newY - this["strY"]) > 30) { this["isMove"] = true; } }); on(oBox, "touchend", function (ev) { if (this["isMove"] === false) { //点击 this.style.webkitTransitionDuration = "1s"; this.style.webkitTransform = "rotate(360deg)"; var delayTimer = window.setTimeout(function () { this.style.webkitTransitionDuration = "0s"; this.style.webkitTransform = "rotate(0deg)"; }.bind(this), 1000); } else { this.style.background = "red"; } });</script>
使用fastclick插件(解决移动端使用click导致的300ms延迟的问题):
<script type="text/javascript"> FastClick.attach(document.body); var oBox = document.querySelector("#box"); oBox.addEventListener("click", function () { this.style.webkitTransform = "rotate(360deg)"; this.style.webkitTransitionDuration = "1s"; this.style.webkitTransform = "rotate(360deg)"; var delayTimer = window.setTimeout(function () { this.style.webkitTransitionDuration = "0s"; this.style.webkitTransform = "rotate(0deg)"; }.bind(this), 1000); }, false);</script>
点击、单击、双击、长按、滑动
单击和双击(300ms)
点击和长按(750ms)
点击和滑动(x或y偏移的距离是否在30px以内,超过30px是滑动)
左右滑动和上下滑动(x轴偏移的距离>y轴偏移的距离=左右滑,相反就是上下滑)
左滑和右滑(偏移的距离>0=右滑,相反左滑)
FastClick.js:解决click事件的300ms的延迟
Touch.js:百度云手势事件库 https://github.com/Clouda-team/touch.code.baidu.com
hammer.js:同上
Zepto.js:被誉为移动端的小型jQuery。
https://github.com/ZhaoJingnian/zepto
jQuery由于是在pc端使用的,所以代码中包含大量的对于IE的兼容处理,而Zepto只应用于移动端开发,所以在jQuery的基础上没有对低版本的IE进行支持。
jQuery提供了很多的选择器类型及DOM的操作方法,但是Zepto中只是实现了部分常用的选择器和方法,例如:jQuery中的动画方法有animate、hide、show、toggle、fadeIn、fadeOut、fadeToggle、slideDown、slideUp、slideToggle….但是Zepto中只有,所以Zepto的代码大小比jQuery小很多。
Zepto专门为移动端开发而诞生,所以相对于jQuery来说更适合移动端:Zepto的animate动画方法支持了css3动画的操作,Zepto专门的准备了移动端常用的事件操作。
tap:点击、singleTap:点击、doubleTap:双击、longTap:长按、swipe:滑动、swipeUp:上滑、swipeDown:下滑、swipeLeft:左滑、swipeRight:下滑
- 移动端事件及事件应用
- 史上最全的常用事件:移动端事件及PC端:鼠标/键盘/表单事件
- 移动端 触摸事件
- 移动端事件
- 移动端事件
- 移动端keyup事件
- 移动端touch事件
- Js_11_移动端事件
- 移动端基本事件
- 移动端事件详解
- 移动端事件介绍
- 移动端触摸事件
- 移动端事件基础
- 移动端触摸事件
- 移动端触摸事件
- 移动端触摸事件
- 移动端touch事件影响click事件
- 2.移动端基础事件---touch事件
- 设计模式
- 第13周 项目一 验证折半查找算法
- 沙箱技术
- Android-ABIFilter-Device supports x86,but APK only supports armeabi-v7a,armeabi,x86_64
- 关于底部导航栏的跳转问题
- 移动端事件及事件应用
- 关于堆和栈的那些事
- Mysql5.6级联复制环境搭建
- Mysql函数INSTR、LOCATE、POSITION VS LIKE
- iOS YYText的使用笔记一(YYTextView图文编辑器)
- AngularJS Eclipse——新手入门【翻译+整理】
- 数据结构第四周项目-猴子选大王
- 北京市蛋糕相关业务分析
- 第十三周 项目二 二叉树排序树中查找的路径