045 Web前端 JS 手機觸控事件

2021-10-07 11:51:54 字數 1163 閱讀 3347

手機觸控事件

#6.24

描述:在移動端裝置中由觸控操作觸發的事件

型別:(1)touchstart:當手指觸控螢幕時觸發;即使已經有乙個手指放在了螢幕上也會觸發。

(2)touchmove:當手指在螢幕上滑動時連續的觸發。

(3)touchend:當手指從螢幕上移開時觸發。

(4)*touchcancel:當系統停止跟蹤觸控時觸發。(如**接入或者彈出資訊,一般在這個操作中來做一些暫停遊戲類的操作)

注意:ps:如非特殊說明,事件均為冒泡事件

pss:手機觸控事件必須使用dom2來進行繫結

psss:可以給乙個元素新增多個觸控事件

var div=document.queryselector('div');

div.addeventlistener('touchstart',function())

div.addeventlistener('touchmove',function())

div.addeventlistener('touchend',function())

div.addeventlistener('touchcancel',function())

更在了 033節——事件概述與繫結

//event事件後面會詳細展開

觸控物件,即【事件物件的touches屬性】中的每乙個元素。

一次觸控會建立乙個觸控物件。

觸控物件中提供了很多屬性方便我們獲取和使用:

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

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

identifier:表示觸控的唯一id。

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

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

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

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

target:觸控的dom節點座標

通常情況下都會在觸控事件被觸發的時候,通過這兩個屬性來獲取當前節點的位置。

045 Web前端 JS this物件

this物件 6.24 概念 this代表函式執行時 自動生成的乙個用來指代函式呼叫者的物件,this只能在函式內部使用。舉例 function test test 指向window,因為函式的呼叫者預設是window document.addeventlistener click test 指向d...

web前端 js 下拉重新整理

下拉重新整理 var w w 0 var list reload var move 0 移動距離 var ystart 0 開始觸碰y座標 var ymove 0 滑動的y座標 var yend 0 移開的y座標 var moveall 0 最後移動的距離 手指觸碰螢幕 w.addeventlist...

web前端開發JS基礎知識

1 alert 彈出警告窗 2 document.write 在文件中寫入 3 console.log 在控制台輸出日誌 例如 alert hello world 1 必須以字母,下劃線或者 開頭。2 可以由字母,下劃線 或數字組成。3 不能使用關鍵字和保留字。4 區分大小寫。1 數值型別 numb...