【HTML5】觸控事件(touchstart、touchmove和touchend)
- touchstart事件:當手指觸控式螢幕幕時候觸發,即使已經有一個手指放在螢幕上也會觸發。
- touchmove事件:當手指在螢幕上滑動的時候連續地觸發。在這個事件發生期間,呼叫preventDefault()事件可以阻止滾動。
- touchend事件:當手指從螢幕上離開的時候觸發。
touchcancel事件:當系統停止跟蹤觸控的時候觸發。關於這個事件的確切出發時間,文件中並沒有具體說明,咱們只能去猜測了。
上面的這些事件都會冒泡,也都可以取消。雖然這些觸控事件沒有在DOM規範中定義,但是它們卻是以相容DOM的方式實現的。所以,每個觸控事件的event物件都提供了在滑鼠實踐中常見的屬性:bubbles(起泡事件的型別)、cancelable(是否用 preventDefault() 方法可以取消與事件關聯的預設動作)、clientX(返回當事件被觸發時,滑鼠指標的水平座標)、clientY(返回當事件觸發時,滑鼠指標的垂直座標)、screenX(當某個事件被觸發時,滑鼠指標的水平座標)和screenY(返回當某個事件被觸發時,滑鼠指標的垂直座標)。除了常見的DOM屬性,觸控事件還包含下面三個用於跟蹤觸控的屬性。
touches:表示當前跟蹤的觸控操作的touch物件的陣列。
- targetTouches:特定於事件目標的Touch物件的陣列。
- changeTouches:表示自上次觸控以來發生了什麼改變的Touch物件的陣列。
每個Touch物件包含的屬性如下:
clientX:觸控目標在視口中的x座標。
clientY:觸控目標在視口中的y座標。
identifier:標識觸控的唯一ID。
pageX:觸控目標在頁面中的x座標。
pageY:觸控目標在頁面中的y座標。
screenX:觸控目標在螢幕中的x座標。
screenY:觸控目標在螢幕中的y座標。
target:觸目的DOM節點目標。
上面的屬性光這麼看,果然非常繁瑣,每個屬性說的都是那麼的細緻,只有真刀實槍的來點小例子才能更加明白其中的奧妙。所以小例子如下。
//javaScript
function load (){
document.addEventListener('touchstart',touch, false);
document.addEventListener('touchmove',touch, false);
document.addEventListener('touchend',touch, false);
function touch (event){
var event = event || window.event;
var oInp = document.getElementById("inp");
switch(event.type){
case "touchstart":
oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
oInp.innerHTML = "
Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault();
oInp.innerHTML = "
Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
}
}
}
window.addEventListener('load',load, false);
當touchstart事件觸發的時候,會將觸控的位置更新到div標籤中。當touchmove事件觸發的時候,會預設行為的滾動(觸控移動的預設行為是滾動頁面),然後觸控操作的變化資訊更新到div標籤中。而touchend事件會輸出有關觸控操作的最終資訊。注意,在touchend事件觸發的時候,touches集合中就沒有任何Touch物件了,因為不存在活動的觸控操作。
這些事件會在文件的所有元素上面觸發,因而可以分別操作頁面的不同部分。在觸控式螢幕幕上的元素,這些事件(包括滑鼠事件)發生的順序如下:
(1)touchstart
(2)mouseover
(3)mousemove(一次)
(4)mousedown
(5)mouseup
(6)click
(7)touchend
介紹了這麼多,這些觸控事件的相容情況怎麼樣呢?
答:支援觸控事件(touchstart、touchmove和touchend)的瀏覽器有:iOs版Safari、Android版WebKit、bada版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1+和LG專有OS中的Phantom瀏覽器。目前只有iOs版Safari支援多點觸控。PC版Firefox 6+ 和Chrome也支援觸控事件。
相關推薦
【HTML5】觸控事件(touchstart、touchmove和touchend)
touchstart事件:當手指觸控式螢幕幕時候觸發,即使已經有一個手指放在螢幕上也會觸發。 touchmove事件:當手指在螢幕上滑動的時候連續地觸發。在這個事件發生期間,呼叫preventDefault()事件可以阻止滾動。 touchend事件:當手指從
HTML5觸控事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由於他們的相容問題不是很理想,應用實戰性不是太強,所以在這裡基本省略,咱們只分享應用廣泛相容不錯的事件,日後隨著相容情況提升以後再陸續新增分享。今天為大家介紹的事件主要是觸控事件:touchstart、touchmove和touchen
HTML5實戰與剖析之觸控事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由於他們的相容問題不是很理想,應用實戰性不是太強,所以在這裡基本省略,咱們只分享應用廣泛相容不錯的事件,日後隨著相容情況提升以後再陸續新增分享。今天為大家介紹的事件主要是觸控事件:touchstart、touchmove和touchen
javaScript -- touch事件詳解(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由於他們的相容問題不是很理想,應用實戰性不是太強,所以在這裡基本省略,咱們只分享應用廣泛相容不錯的事件,日後隨著相容情況提升以後再陸續新增分享。今天為大家介紹的事件主要是觸控事件:touchstart、touchmove和tou
【iOS】WebView的使用、Javascript和Objective-C的互動
現在的App越來越有直接在一個View中擺個WebView,然後裡面鑲嵌個HTML5網頁,再加些和手機系統聯絡的方法的趨勢了。這樣做,以免IOS Apps一套,安卓那邊一套,HTML5的手機網頁版又一套。我都懶得煩了,一套HTML5程式碼吃遍天下,反正現在的HTML5網頁已
【Hibernate】Hibernate中save、persist和saveOrUpdate有何不同?
http://javarevisited.blogspot.tw/2012/09/difference-hibernate-save-vs-persist-and-saveOrUpdate.html 所有這三個方法,也就是save()、saveOrUpdate()
【jQuery】onload事件,load(),ready()比較和使用
一、ready() :頁面DOM結構載入完成後觸發 $(document).ready(function(){...}); $().ready(function(){...}); $(function(){...});上面三種是一樣的,後面兩個是第一個的簡寫。 二
【Android】下拉列表、拖動條、星級評分條與標籤文字的觸控事件
下拉列表、拖動條與星級評分條都是Android中的一些基本元件。 寫一個小小的程式,來說明其用法。 如下圖: 當下拉列表有值選定之後,則彈出相應的提示資訊,哪個值被選擇。星際評分條也一樣,獲取使用者選擇的星數。 標籤文字被觸控則顯示其被觸控。 滑動條,在拖動的時候,則在標
【REACT NATIVE 系列教程之一】觸控事件的兩種形式與四種TOUCHABLE元件詳解
本文是RN(React Native)系列教程第一篇,當然也要給自己的群做個廣告: React Native @Himi :126100395 剛建立的群,歡迎一起學習、討論、進步。本文主要講解兩點:1. PanResponder:觸控事件,用以獲取使用者手指所在螢幕的座標(x,y)或觸發、或滑動、或
【React Native開發】- 觸控事件處理
1.介紹 React Native提供了可以處理觸控事件的元件。觸控即點選、長按、滑動、縮放。 2.點選 處理點選操作事件,可以使用Touchable類元件,通過此類元件的onPress屬性實現點選事
【Android開發小記--9】觸控事件---實現雙指縮放圖片
關於觸控事件 覆寫 onTouchEvent(MotionEvent event) 方法: @Override public boolean onTouchEvent(MotionEvent event) { switch (event.
【HTML5】Canvas 內部元素新增事件處理
前言 canvas 沒有提供為其內部元素新增事件監聽的方法,因此如果要使 canvas 內的元素能夠響應事件,需要自己動手實現。實現方法也很簡單,首先獲得滑鼠在 canvas 上的座標,計算當前座標在哪些元素內部,然後對元素進行相應的操作。配合自定義事件,我們
【JavaScript】讓事件支持先發布後訂閱
class 問題 想要 png trigger 很快 9.png area ++ 之前寫過一個的事件管理器,就是普通的先訂閱後發布模式。但實際場景中我們需要做到後訂閱的也能收到發布的消息。比如我們關註微信公眾號,還是能看到歷史消息的。類似於qq離線消息,我先發給你,你登錄了
【轉】shell expect spawn、linux expect 用法小記 看著舒服點
ssh username 英文 認識 exe 無法找到 usr 過去 操作 使用expect實現自動登錄的腳本,網上有很多,可是都沒有一個明白的說明,初學者一般都是照抄、收藏。可是為什麽要這麽寫卻不知其然。本文用一個最短的例子說明腳本的原理。 腳本代碼如下: #####
面向對象【day08】:靜態方法、類方法、屬性方法
name 每次 對象 sha 飛走了 tee func ssm [0 本節內容 概述 靜態方法 類方法 屬性方法 總結 一、概述 前面我們已經講解了關於類的很多東西,今天講講類的另外的特性:靜態方法(staticmethod)、類方法(classmethod)、屬性
【Quartz】Quartz的搭建、應用(單獨使用Quartz)
文章 sgd aca guide mfc uci strong div guid 原文:http://www.cnblogs.com/nick-huang/p/4848843.html 目錄 1. > 參考的優秀資料 2. > 版本說明 3. > 簡單的
【十】叠代器、生成器、裝飾器和標準庫
ber 遍歷 mmu 取出 out most 例如 list char 一:叠代器 在python中,很多對象可以直接通過for語句來直接遍歷,例如:list、string、dict等等,這些被稱為可叠代對象 叠代器是一個可以I記住遍歷的位置的對象。 在python中,支持
【python】字符串、16進制等數據處理
python binascii 轉碼最近做一個socket server,需要接收組播報文,並進行分析處理。其中涉及的一個問題是,待發送的報文是字符串形式,類似“hello world”。從wireshark截取的報文看,都是16進制數據,以為必須轉為該種類型才能發送,需要轉換為16進制字符串,類似“0x\a
010-shiro與spring web項目整合【四】緩存Ehcache、Redis
principal eba view event ica inter element edi value 一、Ehcache shiro每次授權都會通過realm獲取權限信息,為了提高訪問速度需要添加緩存,第一次從realm中讀取權限數據,之後不再讀取,這裏Shiro和E
【HTML5】頁面點擊按鈕添加一行 刪除一行 全選 反選 全不選
input 遍歷 ble 操作 warn clas type pre pen 頁面點擊按鈕添加一行 刪除一行 全選 反選 全不選 頁面效果圖如下 html頁面代碼 <!DOCTYPE html> <html>