|
標簽： 移動端事件介紹 閱讀目錄
一：理解click的300ms的延遲響應 Click事件在移動手機開發(fā)中有300ms的延遲，因為在手機早期，瀏覽器系統(tǒng)有放大和縮放功能，用戶在屏幕上點擊兩次之后，系統(tǒng)會觸發(fā)放大或者縮放功能，因此系統(tǒng)做了一個處理，當觸摸一次后，在300ms這段時間內有沒有觸摸第二次，如果觸摸了第二次的話，說明是觸發(fā)放大或縮放功能，否則的話是click事件。因此當click時候，所有用戶必須等待于300ms后才會觸發(fā)click事件。所以當在移動端使用click事件的時候，會感覺到有300ms的遲鈍。 二：手勢事件的介紹 touchstart：當手指放在屏幕上觸發(fā); touchmove：當手指在屏幕上滑動時，連續(xù)地觸發(fā); touchend：當手指從屏幕上離開時觸發(fā); touchcancel： 當系統(tǒng)停止跟蹤時觸發(fā); 該事件暫時使用不到; 由于觸摸會導致屏幕動來動去，所以我們可以在這些事件中函數(shù)內部使用 event.preventDefault()來阻止掉默認事件(默認滾動). 先看看頁面的demo；HTML代碼如下： <div id="touch">touch</div> JS如下： var EventUtil = { addHandler: function(element,type,handler) { if(element.addEventListener) { element.addEventListener(type,handler,false); }else if(element.attachEvent) { element.attachEvent("on"+type,handler); }else { element["on" +type] = handler; } }, removeHandler: function(element,type,handler){ if(element.removeEventListener) { element.removeEventListener(type,handler,false); }else if(element.detachEvent) { element.detachEvent("on"+type,handler); }else { element["on" +type] = null; } } }; var touch = document.getElementById("touch"); EventUtil.addHandler(touch,"touchstart",function(event){ console.log(event); })； // 連續(xù)滑動觸發(fā) EventUtil.addHandler(window,"touchmove",function(event){ alert(1); })； //當手指從屏幕上離開時觸發(fā); EventUtil.addHandler(window,"touchend",function(event){ alert(1); }) 如上代碼：在觸摸設備觸摸下，我們先來看看打印事件event如下：
觸摸屬性如下介紹： touches: 表示當前跟蹤的觸摸操作的touch對象的數(shù)組。 當一個手指在觸屏上時，event.touches.length = 1; 當二個手指在觸屏上時，event.touches.length=2, 以此類推； targetTouches: 特定于事件目標的touch對象的數(shù)組。touch事件會毛冒泡，所以我們可以使用這個屬性指出目標對象。如下代碼演示： EventUtil.addHandler(touch,"touchstart",function(event){ console.log(event.targetTouches); })； 打印演示如下：
changedTouches: 表示上次觸摸以來發(fā)生了什么改變的touch對象的數(shù)組。 每個touch對象都包含了以下幾個屬性： clientX 觸摸目標在視口中的X坐標。 clientY觸摸目標在視口中的Y坐標。 Identifier: 標示觸摸的唯一ID。 pageX 觸摸目標在頁面中的X坐標。 pageY 觸摸目標在頁面中的Y坐標。 screenX觸摸目標在屏幕中的X坐標。 screenY 觸摸目標在屏幕中的Y坐標。 target 觸摸的DOM節(jié)點目標。 如下代碼： var touch = document.getElementById("touch"); EventUtil.addHandler(touch,"touchstart",function(event){ console.log(event); })； 如下截圖所示：
三：觸摸事件的介紹 Gestures 這個事件針對IOS設備上的，一個Gestures事件在兩個或更多手指觸摸屏幕時觸發(fā)。如果任何手指你正在監(jiān)聽的Gesture事件(gesturestart，gesturechange，gestureend)節(jié)點上，你將收到對應的gestures事件。 Gesturestart：當一個手指已經按在屏幕上，而另一個手指又觸摸在屏幕時觸發(fā)。 Gesturechange：當觸摸屏幕的任何一個手指的位置發(fā)生改變的時候觸發(fā)。 Gestureend：當任何一個手指從屏幕上面移開時觸發(fā)。 觸摸事件和手勢事件的之間關系： 當一個手指放在屏幕上時，會觸發(fā)touchstart事件，而另一個手指觸摸在屏幕上時觸發(fā)gesturestart事件，隨后觸發(fā)基于該手指的touchstart事件。 如果一個或兩個手指在屏幕上滑動時，將會觸發(fā)gesturechange事件，但是只要有一個手指移開時候，則會觸發(fā)gestureend事件，緊接著會觸發(fā)touchend事件。 手勢的專有屬性： rotation: 表示手指變化引起的旋轉角度，負值表示逆時針，正值表示順時針，從0開始； scale: 表示2個手指之間的距離情況，向內收縮會縮短距離，這個值從1開始的，并隨距離拉大而增長。 四：基本知識點 1.判斷是否為iPhone Javasript代碼如下： // 判斷是否為 iPhone ： function isAppleMobile() { return (navigator.platform.indexOf(‘iPad‘) != -1); }; 2.自動大寫與自動修正 要關閉這兩項功能，可以通過autocapitalize 與autocorrect 這兩個選項： <input type="text" autocapitalize="off" autocorrect="off" /> 3.禁止 iOS 彈出各種操作窗口 -webkit-touch-callout:none 4. 禁止用戶選中文字 -webkit-user-select:none 5. 關于 iOS 系統(tǒng)中，中文輸入法輸入英文時，字母之間可能會出現(xiàn)一個六分之一空格 this.value = this.value.replace(/\u2006/g, ‘‘); 6. Andriod 上去掉語音輸入按鈕 input::-webkit-input-speech-button {display: none}
7. 判斷是否為微信瀏覽器； function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { return true; } else { return false; } } 五：屏幕旋轉事件(onorientationchange)： 判斷屏幕是否旋轉的JS代碼如下： function orientationChange() { switch(window.orientation) { case 0: alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height); break; case -90: alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height); break; case 90: alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height); break; case 180: alert("風景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height); break; }; }; // 添加測試監(jiān)聽函數(shù)代碼如下： addEventListener(‘load‘, function(){ orientationChange(); window.onorientationchange = orientationChange; }); 標簽： |
|
|
