DIV CSS 佈局教程網

JS的Touch事件們
編輯:JavaScript基礎知識     
iphone、ipod Touch、ipad觸屏時的js事件   1、Touch事件簡介   pc上的web頁面鼠標會產生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件,但是在移動終端如iphone、ipod Touch、ipad上的web頁面觸屏時會產生ontouchstart、ontouchmove、ontouchend、ontouchcancel事件,分別對應了觸屏開始、拖拽及完成觸屏事件和取消。   當按下手指時,觸發ontouchstart; 當移動手指時,觸發ontouchmove; 當移走手指時,觸發ontouchend。 當一些更高級別的事件發生的時候(如電話接入或者彈出信息)會取消當前的touch操作,即觸發ontouchcancel。一般會在ontouchcancel時暫停游戲、存檔等操作。     2、Touch事件與Mouse事件的出發關系   在觸屏操作後,手指提起的一剎那(即發生ontouchend後),系統會判斷接收到事件的element的內容是否被改變,如果內容被改變,接下來的事件都不會觸發,如果沒有改變,會按照mousedown,mouseup,click的順序觸發事件。特別需要提到的是,只有再觸發一個觸屏事件時,才會觸發上一個事件的mouseout事件。     3、gesture事件   Gesture事件,包括手指點擊(click),輕拂(flick),雙擊(double-click),手指的分開、閉合(scale)、轉動(rotate)等一切手指能在屏幕上做的事情,它只在有兩根或多根手指放在屏幕上的時候觸發,事件處理函數中會得到一個GestureEvent類型的參數,它包含了手指的scale(兩根移動過程中分開的比例)信息和rotation(兩根手指間連線轉動的角度)信息。這個事件是對touch事件的更高層的封裝,和touch一樣,它同樣包括gesturestart,gesturechange,gestureend。 gesture事件觸發過程: Step 1、第一根手指放下,觸發touchstart Step 2、第二根手指放下,觸發gesturestart Step 3、觸發第二根手指的touchstart Step 4、立即觸發gesturechange Step 5、手指移動,持續觸發gesturechange,就像鼠標在屏幕上移動的時候不停觸發mousemove一樣 Step 6、第二根手指提起,觸發gestureend,以後將不會再觸發gesturechange Step 7、觸發第二根手指的touchend Step 8、觸發touchstart!注意,多根手指在屏幕上,提起一根,會刷新一次全局touch!重新觸發第一根手指的touchstart Step 9、提起第一根手指,觸發touchend     另在w3school上看到可以這樣來判斷平台: function checkStation(){ var info = navigator.userAgent; if(info.indexOf("iPod")!=-1 || info.indexOf("iPad")!=-1 || info.indexOf("iPhone")!=-1 || info.indexOf("Android")!=-1){ alert("平板"); return true; }else{ alert("電腦"); return false; } }
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved