1. 程式人生 > >【HTML5】觸控事件(touchstart、touchmove和touchend)

【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觸控事件(touchstarttouchmovetouchend)

touchstart事件:當手指觸控式螢幕幕時候觸發,即使已經有一個手指放在螢幕上也會觸發。 touchmove事件:當手指在螢幕上滑動的時候連續地觸發。在這個事件發生期間,呼叫preventDefault()事件可以阻止滾動。 touchend事件:當手指從

HTML5觸控事件(touchstarttouchmovetouchend)

 HTML5中新添加了很多事件,但是由於他們的相容問題不是很理想,應用實戰性不是太強,所以在這裡基本省略,咱們只分享應用廣泛相容不錯的事件,日後隨著相容情況提升以後再陸續新增分享。今天為大家介紹的事件主要是觸控事件:touchstart、touchmove和touchen

HTML5實戰與剖析之觸控事件(touchstarttouchmovetouchend)

 HTML5中新添加了很多事件,但是由於他們的相容問題不是很理想,應用實戰性不是太強,所以在這裡基本省略,咱們只分享應用廣泛相容不錯的事件,日後隨著相容情況提升以後再陸續新增分享。今天為大家介紹的事件主要是觸控事件:touchstart、touchmove和touchen

javaScript -- touch事件詳解(touchstarttouchmovetouchend

HTML5中新添加了很多事件,但是由於他們的相容問題不是很理想,應用實戰性不是太強,所以在這裡基本省略,咱們只分享應用廣泛相容不錯的事件,日後隨著相容情況提升以後再陸續新增分享。今天為大家介紹的事件主要是觸控事件:touchstart、touchmove和tou

iOSWebView的使用JavascriptObjective-C的互動

現在的App越來越有直接在一個View中擺個WebView,然後裡面鑲嵌個HTML5網頁,再加些和手機系統聯絡的方法的趨勢了。這樣做,以免IOS Apps一套,安卓那邊一套,HTML5的手機網頁版又一套。我都懶得煩了,一套HTML5程式碼吃遍天下,反正現在的HTML5網頁已

HibernateHibernate中savepersistsaveOrUpdate有何不同?

http://javarevisited.blogspot.tw/2012/09/difference-hibernate-save-vs-persist-and-saveOrUpdate.html     所有這三個方法,也就是save()、saveOrUpdate()

jQueryonload事件,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.

HTML5Canvas 內部元素新增事件處理

前言 canvas 沒有提供為其內部元素新增事件監聽的方法,因此如果要使 canvas 內的元素能夠響應事件,需要自己動手實現。實現方法也很簡單,首先獲得滑鼠在 canvas 上的座標,計算當前座標在哪些元素內部,然後對元素進行相應的操作。配合自定義事件,我們

JavaScript事件支持先發布後訂閱

class 問題 想要 png trigger 很快 9.png area ++ 之前寫過一個的事件管理器,就是普通的先訂閱後發布模式。但實際場景中我們需要做到後訂閱的也能收到發布的消息。比如我們關註微信公眾號,還是能看到歷史消息的。類似於qq離線消息,我先發給你,你登錄了

shell expect spawnlinux expect 用法小記 看著舒服點

ssh username 英文 認識 exe 無法找到 usr 過去 操作 使用expect實現自動登錄的腳本,網上有很多,可是都沒有一個明白的說明,初學者一般都是照抄、收藏。可是為什麽要這麽寫卻不知其然。本文用一個最短的例子說明腳本的原理。 腳本代碼如下:  #####

面向對象day08:靜態方法類方法屬性方法

name 每次 對象 sha 飛走了 tee func ssm [0 本節內容 概述 靜態方法 類方法 屬性方法 總結 一、概述  前面我們已經講解了關於類的很多東西,今天講講類的另外的特性:靜態方法(staticmethod)、類方法(classmethod)、屬性

QuartzQuartz的搭建應用(單獨使用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項目整合緩存EhcacheRedis

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>