移动端：移动端事件

Posted 2021-02-11 guisenbin

移动端事件

---

一、  PC端事件

1. 鼠标类
• click、mouseover、mouseout、mouseleave、mouseenter、mouseup、mousedown、mousewheel...
2. 键盘类
• keydown、keyup...
3. 其他类
• load、blur、focus、change....

二、 移动端事件

1. 点击事件
2. 双击事件
3. 滑动事件
• 上滑、下滑、左滑、右滑
4. 长按事件
5. 摇一摇、重力感应等

三、 touch事件模型

1. touchstart          手指刚接触屏幕时触发
2. touchmove        手指在屏幕上移动时触发
3. touchend           手指从屏幕上移开时触发
4. touchcancel       一些更高级别的事件发生时（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作

 *  在Chrome移动模拟器中模拟，发现鼠标触摸span元素没有任何效果  解决方法：addEventListener

四、addEventListener

1. 是一个侦听事件并处理相应的函数
2. 一般有三个参数，第一个是事件的类型，第二个是侦听到事件后处理事件的函数，第三个参数是事件捕获（值就只有两个，true或false）

五、跟踪触摸的属性

1. touches：表示当前跟踪的触摸操作的touch对象的数组
• 当一个手指在触屏上时，event.touches.length=1
• 当两个手指在触屏上时，event.touches.length=2，以此类推
2. changedTouches：导致触摸事件被触发的触摸点数组
3. targetTouches：特定于事件目标的touch对象数组

六、 触摸事件坐标

1. clientX         触摸目标在视口中的x坐标
2. clientY         触摸目标在视口中的y坐标
3. identifier     标识触摸的唯一ID
4. pageX         触摸目标在页面中的x坐标
5. pageY         触摸目标在页面中的y坐标
6. screenX       触摸目标在屏幕中的x坐标
7. screenY       触摸目标在屏幕中的y坐标
8. target          触摸的DOM节点目标

1 /* 触摸事件坐标的使用方法 */
2 function handleTouch(e){
3 //  如果需要，用pageX或pageY代替clientX或clientY
4   var touch = e.changedTouches[0];
5   var coorX = touch.clientX;
6   var coorY = touch.clientY;
7 }
8 * clientX/Y和pageX/Y的区别在于前者相对于视觉视口的左上角，后者相对布局视口的左上角。布局视口 是可以滚动的

七、 移动端事件封装

 1 /* 单击事件 */
 2 element.addEventListener(‘touchstart‘, function(e) {
 3             var touches = e.touches[0];
 4             startTx = touches.clientX;
 5             startTy = touches.clientY;
 6         }, false);
 7 * 案例中通过调用tap（封装的单击事件），可以很大程度上简化代码量，方便我们开发
 8 /* 长按事件 */
 9 var touches = e.touches[0];
10             // 长按 750ms 才去执行 fn函数
11             lTapTimer = setTimeout(function() {  fn();  }, 750);
12             e.preventDefault();
13 * 在touchmove中需要判断水平或者垂直方向的坐标距离，如果大于某个值，我们就不再认为是长按操作了

八、FastClick库

1. 定义
• 一个简单易用的库，用于消除click移动浏览器上物理点击和事件触发之间的300毫秒延迟
2. 网址
• https://github.com/ftlabs/fastclick
• 截至2015年底，大多数移动浏览器（特别是Chrome和Safari）不再具有300ms的触摸延迟，因此fastclick对新型浏览器没有任何好处，并且可能会在应用程序中引入错误。仔细考虑你是否真的需要使用它
3. 使用方法
• 引入插件的javascript文件到你的html网页中
• <script type=‘application/javascript‘ src=‘/path/to/fastclick.js‘></script>
• 注意：
• type属性在HTML5网页中可以省略不写
• 脚本必须加载到实例化fastclick在页面的任何元素之前
• 实例化 fastclick 最好在body元素的前面

1 /*  实例化 */
2 if (‘addEventListener‘ in document) {
3     document.addEventListener(‘DOMContentLoaded‘, function() {
4         FastClick.attach(document.body);
5     }, false);
6 }
7 * 引入库和实例化推荐写到body元素的前面

九、 移动端事件库

1. touch.js
• 百度touch.js 是Web移动端touch点击事件不错的解决方案
2. 网站
• https://github.com/Clouda-team/touchjs
3. 支持移动端事件
4. 
5. hammer.js
   • 一款开源的移动端脚本框架，他能完美的实现在移端开发的大多数事件，如点击、滑动、拖动、多点触控等事件
   • 网站   http://hammerjs.github.io/getting-started/
   • 需要new