1. 程式人生 > >HTML5觸控事件(多點、單點觸控)

HTML5觸控事件(多點、單點觸控)

本文轉自:http://www.360us.net/article/9.html

HTML5的觸控API支援處理單點和多點的觸控事件處理。

介面

1、TouchEvent:代表了一個觸控事件。

主要屬性:

TouchEvent.changedTouches:一個TouchList物件。代表了所有上一個接觸點到當前點狀態發生變化的點。

TouchEvent.touches:一個TouchList物件。代表的所有當前觸控點,不管目標或者狀態是否改變。

TouchEvent.type:觸控事件型別。有touchstart、touchend、touchmove、touchenter、touchleave和touchleave。

2、Touch:代表一個單獨的觸控點。

主要屬性:Touch.identifier:這個觸控物件的唯一標識。

3、TouchList:代表一組觸控點。比如同時有多根手指放在在螢幕上面。

4、DocumentTouch:包含建立Touch和TouchList物件的方法。

觸控事件

  1. touchstart:觸控的時候發生。

  2. touchend:手指從螢幕擡起時發生。手指劃出了螢幕也會觸發這個事件。

  3. touchmove:手指沿著螢幕滑動時觸發。

  4. touchenter:觸控點進入到一個元素。

  5. touchleave:觸控點離開一個元素。

  6. touchcancel:當觸控受到干擾而中斷時觸發。比如一個彈框,或者觸控點離開了文件視窗區域到了其他地方,或者觸控點超出了最大可支援的上限,那麼最先的觸控將會退出。

下面一個跟蹤多點觸控的例子,允許使用者同時多於一個手指畫線,可以直接執行:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106

相關推薦

HTML5觸控事件觸控

本文轉自:http://www.360us.net/article/9.html HTML5的觸控API支援處理單點和多點的觸控事件處理。 介面 1、TouchEvent:代表了一個觸控事件。 主要屬性: TouchEvent.chang

樹狀陣列專題 更新區間求和 + 區間更新查詢 + 區間更新區間求和差分思想)

                                                                                            樹狀陣列專題 一直感覺樹狀陣列用處比較小而且侷限、因為最基本的用法就是單點更新和區間求和、

MongoDB分片群集實現分片服務啟用分片服務管理故障模擬

Opens 取數 page use chmod 組成 壓力 多個 clu MongoDB分片概述 1、什麽是分片 高數據量和吞吐量的數據庫應用會對單機的性能造成較大壓力,大的查詢量會將單機的CPU耗盡,大的數據量對單機的存儲壓力較大,最終會耗盡系統的內存而將壓力轉移到磁盤

基於token的登入管理裝置登入裝置登入

不管是客戶端介面還是網頁H5介面,一般我們都需要登入驗證,即要求所有的介面訪問都必須在登入之後,以確認身份,防止非法呼叫。一般的流程都是登入的時候返回一個代表此登入的token,以後所有介面都帶上此token,在所有介面呼叫之前攔截驗證,一般都是通過AOP或者一個Filter、攔截器來實現。而退

NGUI之響應滑鼠事件劃過停留選等

一、不管什麼響應,必須要新增碰撞器(要注意的是NGUI要用自己的方法來新增碰撞器) 二、給需要響應的遊戲物件或者預設物體新增兩個指令碼UIEventListener 和UIEventOver,如圖 三、假設現在要響應滑鼠停留在物體和移走物體時候的兩種訊息 給物件新增指令碼

HTML5:Animate cc互動之“”功能

一、實現功能選擇題中有3中型別,“單選”“多選”“單多選”二、步驟a.單選var s = this; s.stop(); //隱藏提交按鈕、錯對框 s.right_case.visible = false; s.false_case.visible = false; s.s

第25章OnTouchListener觸控事件從零開始學Android

  在Android App應用中,OnTouch事件表示觸控事件,本章我們通過滑過影象獲取當前位置理解其具體用法。   知識點:OnTouch    一、設計介面   1、首先把c.jpg圖片複製到res/drawable-hdpi資料夾內。      2、開啟“re

微信小程式防止事件一分鐘內一次有效

var m = date.getMinutes().toString();//獲得當前分鐘數 console.log('提交外面的') console.log(m) console.log(date.getMinutes()) //開始快取池中沒有分鐘數,當前分鐘數肯定不等於

ASP.NET Core Authentication系列基於Cookie實現應用間登入SSO

前言 === 本系列前三篇文章分別從ASP\.NET Core認證的三個重要概念,到如何實現最簡單的登入、登出和認證,再到如何配置Cookie 選項,來介紹如何使用ASP\.NET Core認證。感興趣的可以瞭解一下。 - [ASP.NET Core Authentication系列(一)理解Claim,

JMeter 參數化檢查集合轉載

準備 相同 test 多用戶 監聽器 助手 性能 之間 jmeter 參數化:簡單的來理解一下,我們錄制了一個腳本,這個腳本中有登錄操作,需要輸入用戶名和密碼,假如系統不允許相同的用戶名和密碼同時登錄,或者想更好的模擬多個用戶來登錄系統。 這個時候就需要對用戶名和密碼進行

滑動選中td,支持

win startid mouseover 16px start addclass play tex script <!DOCTYPE html><html> <head> <meta charset="utf-

產品方法論總結4——痛點

發送 比較 電影 社交 提高 bsp 需求 畫像 照片 產品的抓手,主要在於痛點和爽點。前面也提到了痛點即為恐懼,對於用戶而言是剛需,爽點為即時滿足,對用戶而言是興奮點,能讓用戶達到體驗值的高潮,而這裏也提到的癢點是滿足虛擬自我,例如,網紅產品,靠的就不是痛點和爽

併發伺服器的實現程序執行緒...

一、多程序實現併發伺服器 程式碼如下:multiprocess_server.c /* ============================================================================ Name : TCPServ

區間修改查詢

Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 29305 &nbs

Java 009 面向物件抽象類介面

知識點梳理 心得體會 小知識點 1.多型中成員訪問特點:成員方法看左右,子類都會先訪問父類構造方法(先初始化父類成員才能被子類呼叫),其他只看左邊 2.多型缺點:不能使用子類特有功能,解決辦法有兩種:一、建立子類物件調方法(不合理且佔記憶體)二、向下轉型:Zi z=(Zi)

Java學習日常包裝類final修飾符抽象類

學習內容 多型中的instanceof運算子 public class Client1 { public static void main(String[] args) { Animal tom = new Dog(); Anim

Java 知識點整理-3.面向物件抽象類介面

1、多型概述:事物存在的多種形態。 2、多型前提:要有繼承關係;要有方法重寫;要有父類引用指向子類物件(父類名 識別符號 = new 子類名();)。 3、多型中的成員訪問特點:Ⅰ.成員變數:編譯看左邊(父類),執行看左邊(父類)。 4、多型中的成員訪問特點:Ⅱ.成員方法:編譯看左邊(父

文字溢位處理為省略號單行

文字溢位處理 一、單行文字溢位處理 效果圖: html程式碼: <body> <div class="text">vukfjygfvhjvfgdtryutfvghdfkjgfdhgfhjgdfdgj</div> <div

O2OA整合政務釘釘,實現人員同步組織同步登入(免登)待辦待閱訊息推送

廢話不多說,直接上程式碼。 實現與政務釘釘的人員整合,待辦推送以及單點登入. 將次配置檔案由模版路徑拷貝到config目錄下. 配置檔名: zhengwuDingding.json 模版路徑:o2server/config/sample/zhengwuDingding.json 工作路徑:o

虛擬函式繼承虛表

虛擬函式 虛擬函式:類的成員函式前加virtual關鍵字,則稱這個成員函式為虛擬函式; 虛擬函式重寫 虛擬函式重寫:當在子類中定義了一個與父類完全相同的虛擬函式時,則稱子類的虛擬函式重寫(覆蓋)了父類的虛擬函式。子類重寫的虛擬函式可以沒有virtual(c++語