05移动端事件

一、移动端三大事件    

     1、手指按下     ontouchstart

     2、手指触摸     ontouchmove     

     3、手指抬起     ontouchend

//注意：在移动开发时，浏览器模拟器时好时坏，一般不用onX的方式绑定事件函数，要用事件绑定的方式（即第二种）
div.ontouchstart = function(){};
div.addEventListener('touchstart', function(){});

 

二、PC端事件在移动端（出现的问题）

     1、PC端事件在移动端略慢，大概300ms左右

     2、阻止PC事件

document.addEventListener('touchstart', function(ev){
    ev.preventDefault();
});

          作用与问题：

               1、移动端的点透     问题：当上层元素发生点击时，下层元素也有点击特性。300ms之后，如果上层元素消失或隐藏，目标点会“漂移”到下层元素身上，就会触发点击行为

                    解决：法1. 下层不要使用有焦点特性的元素（如a或者其他有点击行为的元素）     法2. 阻止PC事件

document.addEventListener('touchstart', function(ev){
    ev.preventDefault();
});
p.addEventListenr('touchstart', function(){     //这边click 改为 touchstart
    alert(111);
});    

               2、解决IOS10下meta中禁止用户缩放功能

               3、解决IOS10下溢出隐藏问题

               4、禁止系统默认的滚动条

               5、禁止长按选中文字、图片，系统默认菜单

               6、问题：阻止了元素的焦点行为

//解决方法（解决因为document的阻止事件导致的 input 框不能触焦问题）
txt.addEventListenr('touchstart', function(ev){
    ev.stopPropagation();
});

 

三、移动端事件对象（当给某元素加上绑定事件函数之后，事件函数默认第一个参数就是事件对象。事件对象：用户在浏览器下触发某个行为，事件对象会记录用户操作时的相关细节（如位置信息等））

     1、touches：当前位于 屏幕（包括dom元素之外） 上的所有手指的列表

     2、targetTouches：位于当前 DOM 元素上（当前dom元素之外的无法获取）的手指的列表

     3、changedTouches：涉及当前事件的手指的一个列表

     例子：移动端无缝轮播切换