JS的Touch事件們,觸屏時的js事件

2022-09-17 20:03:20 字數 1467 閱讀 1091

丫的,終於找到了js在平板電腦上的事件!!!

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()else

}

移動端觸屏滑動touch事件相關

移動端觸屏滑動的效果其實就是輪播,在pc的頁面上很好實現,繫結click和mouseover等事件來完成。但是在移動裝置上,要實現這種輪播的效果,就需要用到核心的touch事件。處理touch事件能跟蹤到螢幕滑動的每根手指。以下是四種touch事件 touchstart 手指放到螢幕上時觸發 tou...

js的左右滑動觸屏事件

js的左右滑動觸屏事件,主要有三個事件 touchstart,touchmove,touchend。這三個事件最重要的屬性是 pagex和 pagey,表示x,y座標。touchstart在觸控開始時觸發事件 touchend在觸控結束時觸發事件 touchmove這個事件比較奇怪,按道理在觸控到過...

手機端html5觸屏事件 touch事件

touchstart 觸控開始的時候觸發 touchmove 手指在螢幕上滑動的時候觸發 touchend 觸控結束的時候觸發 而每個觸控事件都包括了三個觸控列表,每個列表裡包含了對應的一系列觸控點 用來實現多點觸控 touches 當前位於螢幕上的所有手指的列表。targettouches 位於當...