html5 移動端觸發的基本事件

2021-07-26 19:50:17 字數 1019 閱讀 5286

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則以螢幕為基準)。 

radiusx/radiusy/rotationangle:畫出大約相當於手指形狀的橢圓形,分別為橢圓形的兩個半徑和旋轉角度。

varobj = document.getelementbyidx_x('id');

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

},false);

HTML5移動端優化

手機端筆記 float在渲染時計算量比較大,儘量減少使用 過多的font size引發css樹的效率 a 避免不必要的dom操作 b 盡量改變class而不是style,使用classlist代替classname c 避免使用document.write d 減少drawimage meta na...

HTML5移動端適配

基準html 機型寬度 可視區域 螢幕比例 html font site 元素寬度 px 元素寬度 rem iphone6 plus 基準 414px 110px 200px 10rem iphone6 375px 375 414 0.9057 375 414 10 9.058 px iphone5...

html5移動端開發

移動端開發準備 1 meta標籤的設定 h5頁面視窗自動調整到裝置寬度,並禁止使用者縮放頁面 忽略將頁面中的數字識別為 號碼 忽略android平台中對郵箱位址的識別 2 重點設定 width device width 寬度等於當前裝置的寬度 initial scale 初始的縮放比例 預設設定為1...