手機端html5觸屏事件

2021-10-01 10:47:13 字數 2661 閱讀 6826

屬性描述

touchstart觸控開始的時候觸發

touchmove手指在螢幕上滑動的時候觸發

touchend觸控結束的時候觸發

而每個觸控事件都包括了三個觸控列表,每個列表裡包含了對應的一系列觸控點(用來實現多點觸控)

touches當前位於螢幕上的所有手指的列表。

targettouches位於當前dom元素上手指的列表。

changedtouches涉及當前事件手指的列表。

每個觸控點由包含了如下觸控資訊(常用):

identifier:乙個數值,唯一標識觸控會話(touch session)中的當前手指。一般為從0開始的流水號(android4.1,uc)

target:dom元素,是動作所針對的目標。

pagex/pagex/clientx/clienty/screenx/screeny:乙個數值,動作在螢幕上發生的位置(page包含滾動距離,client不包含滾動距離,screen則以螢幕為基準)。 

var obj = document.getelementbyidx_x('id');

obj.addeventlistener('touchmove', function(event) 

}, false);

使用者在移動端瀏覽h5的時候,會使用手指進行一連串的操作,單擊、雙擊、上拉、下拉等等一系列操作,這裡主要針對touch事件進行一些簡單的介紹; 使用者從手指觸碰到螢幕到手指離開螢幕這中間,會觸發一系列的touch事件: 

touchstart:當手指觸碰到螢幕的時候觸發 

touchmove:當手指在螢幕上滑動的時候觸發 

touchend:當手指離開螢幕的時候時候觸發 

touchcancel事件:當系統停止跟蹤觸控的時候觸發(這個事件很少會用,一般不做深入研究)。 

一般來講,從手指觸碰到螢幕,到手指離開螢幕,至少會觸發touchstart、touchmove、touchend三個事件,因為手指按下與抬起時候的位置,不可能完全相同(當然也會有例外); 

使用

監聽這3個事件:

1. window.touchstart= function(event){} 

2. window.touchmove= function(event){} 

3. window.touchend= function(event){}

event:

1.touches:表示當前跟蹤的觸控操作的touch物件的陣列。

2.targettouches:特定於事件目標的touch物件的陣列。

3.changetouches:表示自上次觸控以來發生了什麼改變的touch物件的陣列。

每個touch物件包含的屬性

1.clientx:觸控目標在視口中的x座標。 

2.clienty:觸控目標在視口中的y座標。

3.identifier:標識觸控的唯一id。 

4.pagex:觸控目標在頁面中的x座標。

5.pagey:觸控目標在頁面中的y座標。

6.screenx:觸控目標在螢幕中的x座標。 

7.screeny:觸控目標在螢幕中的y座標。

8.target:觸目的dom節點目標。 

簡易版移動端的下重新整理 

var touchstarty = ""; 

window.ontouchstart = function(event)  

var touchmovey = ""; 

window.ontouchmove = function(event)     

//這裡設定下拉顯示區域為300   根據不同的下拉高度  在內容區顯示不同的文字   

if((touchmovey - touchstarty) * 1 < 300)    

if((touchmovey - touchstarty) * 1 >= 300)  

} var touchendy = "";

window.ontouchend = function(event)     

//這裡可以寫重新整理的邏輯  一般來講   只有當下拉距離大於一定高度之後 才會執行重新整理操作  這裡不做處理

}

手機端html5觸屏事件 touch事件

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

手機端html5觸屏事件 touch事件

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

手機端html5觸屏事件 touch事件

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