05移動端事件

標籤：使用者操作   def   end   第一個   左右   函數   style   隱藏   0ms   

一、移動端三大事件         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：涉及當前事件的手指的一個列表     例子：移動端無縫輪播切換                    

05移動端事件