婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > 整理HTML5移動端開發(fā)的常用觸摸事件

整理HTML5移動端開發(fā)的常用觸摸事件

熱門標簽:杭州營銷電銷機器人供應(yīng)商 聯(lián)通400電話申請 飛亞外呼系統(tǒng) 貸款電銷人工和機器人哪個好 百應(yīng)電銷機器人產(chǎn)業(yè) 電視購物電銷外呼系統(tǒng) 高德地圖標注賓館位置 西寧智能外呼系統(tǒng)加盟 電話機器人如何

HTML5中新添加了很多事件,但是由于他們的兼容問題不是很理想,應(yīng)用實戰(zhàn)性不是太強,所以在這里基本省略,咱們只分享應(yīng)用廣泛兼容不錯的事件,日后隨著兼容情況提升以后再陸續(xù)添加分享。今天為大家介紹的事件主要是觸摸事件:touchstart、touchmove和touchend。

  一開始觸摸事件touchstart、touchmove和touchend是iOs版Safari瀏覽器為了向開發(fā)人員傳達一些信息新添加的事件。因為iOs設(shè)備既沒有鼠標也沒有鍵盤,所以在為移動Safari瀏覽器開發(fā)交互性網(wǎng)頁的時候,PC端的鼠標和鍵盤事件是不夠用的。

  在iPhone 3Gs發(fā)布的時候,其自帶的移動Safari瀏覽器就提供了一些與觸摸(touch)操作相關(guān)的新事件。隨后,Android上的瀏覽器也實現(xiàn)了相同的事件。觸摸事件(touch)會在用戶手指放在屏幕上面的時候、在屏幕上滑動的時候或者是從屏幕上移開的時候出發(fā)。下面具體說明:

  touchstart事件:當手指觸摸屏幕時候觸發(fā),即使已經(jīng)有一個手指放在屏幕上也會觸發(fā)。

  touchmove事件:當手指在屏幕上滑動的時候連續(xù)地觸發(fā)。在這個事件發(fā)生期間,調(diào)用preventDefault()事件可以阻止?jié)L動。

  touchend事件:當手指從屏幕上離開的時候觸發(fā)。

  touchcancel事件:當系統(tǒng)停止跟蹤觸摸的時候觸發(fā)。關(guān)于這個事件的確切出發(fā)時間,文檔中并沒有具體說明,咱們只能去猜測了。

  上面的這些事件都會冒泡,也都可以取消。雖然這些觸摸事件沒有在DOM規(guī)范中定義,但是它們卻是以兼容DOM的方式實現(xiàn)的。所以,每個觸摸事件的event對象都提供了在鼠標實踐中常見的屬性:bubbles(起泡事件的類型)、cancelable(是否用 preventDefault() 方法可以取消與事件關(guān)聯(lián)的默認動作)、clientX(返回當事件被觸發(fā)時,鼠標指針的水平坐標)、clientY(返回當事件觸發(fā)時,鼠標指針的垂直坐標)、screenX(當某個事件被觸發(fā)時,鼠標指針的水平坐標)和screenY(返回當某個事件被觸發(fā)時,鼠標指針的垂直坐標)。除了常見的DOM屬性,觸摸事件還包含下面三個用于跟蹤觸摸的屬性。


  touches:表示當前跟蹤的觸摸操作的touch對象的數(shù)組。

  targetTouches:特定于事件目標的Touch對象的數(shù)組。

  changeTouches:表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數(shù)組。


每個Touch對象包含的屬性如下。

  clientX:觸摸目標在視口中的x坐標。

  clientY:觸摸目標在視口中的y坐標。

  identifier:標識觸摸的唯一ID。

  pageX:觸摸目標在頁面中的x坐標。

  pageY:觸摸目標在頁面中的y坐標。

  screenX:觸摸目標在屏幕中的x坐標。

  screenY:觸摸目標在屏幕中的y坐標。

  target:觸目的DOM節(jié)點目標。

每個觸摸點由包含了如下觸摸信息(常用):

identifier:一個數(shù)值,唯一標識觸摸會話(touch session)中的當前手指。一般為從0開始的流水號(android4.1,uc)

target:DOM元素,是動作所針對的目標。

pageX/pageX/clientX/clientY/screenX/screenY:一個數(shù)值,動作在屏幕上發(fā)生的位置(page包含滾動距離,client不包含滾動距離,screen則以屏幕為基準)。 

radiusX/radiusY/rotationAngle:畫出大約相當于手指形狀的橢圓形,分別為橢圓形的兩個半徑和旋轉(zhuǎn)角度。初步測試瀏覽器不支持,好在功能不常用,歡迎大家反饋。

JavaScript操作小例子:

JavaScript Code復制內(nèi)容到剪貼板
  1. var obj = document.getElementByIdx_x('id');   
  2. obj.addEventListener('touchmove'function(event) {   
  3.      // 如果這個元素的位置內(nèi)只有一個手指的話   
  4.     if (event.targetTouches.length == 1) {   
  5.      event.preventDefault();// 阻止瀏覽器默認事件,重要    
  6.         var touch = event.targetTouches[0];   
  7.         // 把元素放在手指所在的位置   
  8.         obj.style.left = touch.pageX-50 + 'px';   
  9.         obj.style.top = touch.pageY-50 + 'px';   
  10.         }   
  11. }, false);  

標簽:邯鄲 玉溪 安慶 晉中 煙臺 內(nèi)蒙古 撫州 牡丹江

巨人網(wǎng)絡(luò)通訊聲明:本文標題《整理HTML5移動端開發(fā)的常用觸摸事件》,本文關(guān)鍵詞  整理,HTML5,移動,端,開發(fā),;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《整理HTML5移動端開發(fā)的常用觸摸事件》相關(guān)的同類信息!
  • 本頁收集關(guān)于整理HTML5移動端開發(fā)的常用觸摸事件的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章
    主站蜘蛛池模板: 柳河县| 乌鲁木齐县| 容城县| 天祝| 玉溪市| 图们市| 奉贤区| 祁东县| 博白县| 清水河县| 丽江市| 额尔古纳市| 天台县| 南召县| 汉中市| 昌宁县| 顺昌县| 武平县| 出国| 西盟| 汶上县| 吉林省| 高唐县| 吴川市| 新民市| 麻栗坡县| 塘沽区| 定兴县| 兴安县| 沽源县| 新巴尔虎左旗| 东宁县| 盐山县| 泽普县| 济宁市| 交城县| 平昌县| 凤台县| 宜宾县| 濮阳市| 页游|