国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

javascript移動開發中touch觸摸事件詳解

2019-11-20 10:22:19
字體:
來源:轉載
供稿:網友

事件對象是用來記錄一些事件發生時的相關信息的對象。事件對象只有事件發生時才會產生,并且只能是事件處理函數內部訪問,在所有事件處理函數運行結束后,事件對象就被銷毀!

  • W3C DOM把事件對象作為事件處理函數的第一個參數傳入進去
  • IE將事件對象作為window對象的一個屬性(相當于全局變量)

originalEvent對象

在一次偶然的使用中,我發現當使用on()函數并且傳入第二個選擇器參數時,e.touches[0]的訪問為undefined,打印e發現,它的事件對象不是原生的事件對象。經查閱發現它是jquery事件對象。

$(window).on("touchstart","body",function(e){  console.log(e)})

上面例子中event中有一個originalEvent屬性,而這才是真正的touch事件。jQuery.Event 是一個構造函數,其創建一個可讀寫的jQuery事件對象,并在event 對象保留了對這個原生事件對象 event 的引用($event.originalEvent)。我們綁定的事件處理程序所處理的事件對象都是 $event。該方法也可以傳遞一個自定義事件的類型名,用于生成用戶自定義事件對象。

touch事件

touchmove: 當手指在屏幕上滑動的時候連續地觸發。
touchstart: 當手指觸摸屏幕時候觸發,即使已經有一個手指放在屏幕上也會觸發
touchend: 當手指從屏幕上離開的時候觸發。

TouchEvent對象

每一個touch事件的觸發都會產生一個TouchEvent對象,以下是TouchEvent對象三個比較常用的重要屬性

touches 當前位于屏幕上的所有手指的一個列表。
targetTouches 特定于事件目標的Touch對象的數組。[當前手指]
changeTouches 表示自上次觸摸以來發生了什么改變的Touch對象的數組。

在這里,我用js寫了一個touch事件,點擊屏幕可觸發,將其事件事件對象在控制臺打印出,結果如下(箭頭指向的是上述三個屬性):

window.addEventListener("touchstart",function(event){  console.log(event);})

觸摸事件對象屬性

touches、targetTou、changeTouches都包含以下屬性值

clientX:觸摸目標在視口中的x坐標。
clientY:觸摸目標在視口中的y坐標。
identifier:標識觸摸的唯一ID。
pageX:觸摸目標在頁面中的x坐標。
pageY:觸摸目標在頁面中的y坐標。
screenX:觸摸目標在屏幕中的x坐標。
screenY:觸摸目標在屏幕中的y坐標。
target:觸摸的DOM節點目標。
還是上面的那個例子,changeTouches對象在控制臺輸出如下:

以上就是本文的全部內容,希望對大家的學習有所幫助。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 政和县| 山东| 安泽县| 神木县| 台前县| 修武县| 枣阳市| 河曲县| 花莲县| 江西省| 黄梅县| 青河县| 肇东市| 澄迈县| 柘荣县| 容城县| 巩留县| 德昌县| 射洪县| 闽清县| 库伦旗| 垫江县| 浮山县| 河津市| 邵武市| 抚宁县| 休宁县| 临泉县| 长治市| 镇远县| 若羌县| 开鲁县| 庆城县| 绿春县| 竹山县| 图们市| 台东县| 哈密市| 寻乌县| 平阴县| 成安县|