十年專注于品牌網站建設 十余年專注于網站建設_小程序開發_APP開發,低調、敢創新、有情懷!
      南昌百恒網絡微信公眾號 掃一掃關注
      小程序
      tel-icon全國服務熱線:400-680-9298,0791-88117053
      掃一掃關注百恒網絡微信公眾號
      掃一掃打開百恒網絡微信小程序

      百恒網絡

      南昌百恒網絡

      觸摸事件中touchstar、touchmove、touchend、touchcancel事件應用方法及實例

      百恒網絡 2017-01-07 21302

      前面我們介紹過移動設備中一些設備事件,例如手機旋轉90度、傾斜等設置放置姿態變化的四大事件orientationchange事件、MozOrientation事件、deviceorientation事件、devicemotion事件,接下由南昌網站建設公司百恒網絡前端開發工程師向大介紹在移動端的觸摸事件。
      ? ? ? ?iOS版 Safari為了向開發人員傳達一些特殊信息,新增了一些專有事件。因為 iOS設備既沒有鼠標 也沒有鍵盤,所以在為移動 Safari開發交互性網頁時,常規的鼠標和鍵盤事件根本不夠用。隨著 Android 中的 WebKit 的加入,很多這樣的專有事件變成了事實標準,導致 W3C開始制定 Touch Events規范(參 見 https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html)。以下介紹的事件只針對觸摸設備。?
      ? ? ? ?觸摸事件包含 iOS 2.0軟件的 iPhone 3G發布時,也包含了一個新版本的 Safari瀏覽器。這款新的移動 Safari 提供了一些與觸摸(touch)操作相關的新事件。后來,Android上的瀏覽器也實現了相同的事件。觸摸 事件會在用戶手指放在屏幕上面時、在屏幕上滑動時或從屏幕上移開時觸發。具體來說,有以下幾個觸 摸事件。?
      ? ? ? ?touchstart:當手指觸摸屏幕時觸發;即使已經有一個手指放在了屏幕上也會觸發。?
      ? ? ? ?touchmove:當手指在屏幕上滑動時連續地觸發。在這個事件發生期間,調用preventDefault() 可以阻止滾動。?
      ? ? ? ?touchend:當手指從屏幕上移開時觸發。?
      ? ? ? ?touchcancel:當系統停止跟蹤觸摸時觸發。關于此事件的確切觸發時間,文檔中沒有明確說明。?
      ? ? ? ?上面這幾個事件都會冒泡,也都可以取消。雖然這些觸摸事件沒有在 DOM規范中定義,但它們卻 是以兼容 DOM的方式實現的。因此,每個觸摸事件的 event 對象都提供了在鼠標事件中常見的屬性: bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、 ctrlKey 和 metaKey。?
      ? ? ? ?除了常見的 DOM屬性外,觸摸事件還包含下列三個用于跟蹤觸摸的屬性。?
      ? ? ? ?touches:表示當前跟蹤的觸摸操作的 Touch 對象的數組。
      ? ? ? ?targetTouchs:特定于事件目標的 Touch 對象的數組。?
      ? ? ? ?changeTouches:表示自上次觸摸以來發生了什么改變的 Touch 對象的數組。 每個 Touch 對象包含下列屬性。?
      ? ? ? ?clientX:觸摸目標在視口中的 x坐標。?
      ? ? ? ?clientY:觸摸目標在視口中的 y坐標。?
      ? ? ? ?identifier:標識觸摸的唯一 ID。 ?
      ? ? ? ?pageX:觸摸目標在頁面中的 x坐標。?
      ? ? ? ?pageY:觸摸目標在頁面中的 y坐標。?
      ? ? ? ?screenX:觸摸目標在屏幕中的 x坐標。?
      ? ? ? ?screenY:觸摸目標在屏幕中的 y坐標。?
      ? ? ? ?target:觸摸的 DOM節點目標。 使用這些屬性可以跟蹤用戶對屏幕的觸摸操作。來看下面的例子。?



      ? ? ? ?Touch Events Example
      ? ? ? ?


      ? ? ? ?

      Touch anywhere on the screen. This only works on an iPhone or iPod Touch running iPhone 2.x software.


      ? ? ? ?
      ?
      ? ? ? ?

      ? ? ? ?


      ? ? ? ?以上代碼會跟蹤屏幕上發生的一次觸摸操作。為簡單起見,只會在有一次活動觸摸操作的情況下輸 出信息。當 touchstart 事件發生時,會將觸摸的位置信息輸出到
      元素中。當 touchmove 事件 發生時,會取消其默認行為,阻止滾動(觸摸移動的默認行為是滾動頁面),然后輸出觸摸操作的變化 信息。而 touchend 事件則會輸出有關觸摸操作的終信息。注意,在 touchend 事件發生時,touches 集合中就沒有任何 Touch 對象了,因為不存在活動的觸摸操作;此時,就必須轉而使用 changeTouchs 集合。?
      ? ? ? ?這些事件會在文檔的所有元素上面觸發,因而可以分別操作頁面的不同部分。在觸摸屏幕上的元素 時,這些事件(包括鼠標事件)發生的順序如下:?
      ? ? ? ?(1)touchstart?
      ? ? ? ?(2) mouseover
      ? ? ? ?(3) mousemove(一次)
      ? ? ? ?(4) mousedown
      ? ? ? ?(5) mouseup
      ? ? ? ?(6) click
      ? ? ? ?(7) touchend?
      ? ? ? ?支持觸摸事件的瀏覽器包括 iOS版 Safari、Android版 WebKit、bada版 Dolfin、OS6+中的 BlackBerry WebKit、Opera Mobile 10.1+和 LG專有 OS中的 Phantom瀏覽器。目前只有 iOS版 Safari支持多點觸摸。 桌面版 Firefox 6+和 Chrome也支持觸摸事件。?
      ? 本文僅限內部技術人員學習交流,不得作于其他商業用途.希望此文對廣大技人員有所幫助。原創文章出自:南昌網站建設公司-百恒網絡http://www.dgscpc.com/如轉載請注明出處!

      400-680-9298,0791-88117053
      掃一掃關注百恒網絡微信公眾號
      掃一掃打開百恒網絡小程序

      歡迎您的光顧,我們將竭誠為您服務×

       
       
       
       
       
       
       
       
      ×
      宅男在线国产精品无码| 国产精品一区12p| 亚洲精品久久无码| 亚洲国产精品综合久久网各| 久久久999久久久精品| 国内少妇偷人精品视频免费| 中日欧洲精品视频在线| 亚洲精品视频免费观看| 日韩aⅴ人妻无码一区二区| 日韩精品一区二三区中文| 国产精品成人va在线播放| 图片区精品综合自拍| 成人国产精品秘片多多| 亚洲精品国产suv一区88| 国产日韩精品视频一区二区三区| 亚洲精品中文字幕无乱码麻豆| 2022国产精品手机在线观看| 久久精品天天中文字幕人妻| 久久九九精品99国产精品| 亚洲综合精品一二三区在线| 久久99精品久久水蜜桃| 久久亚洲国产精品| 久久99国产亚洲精品观看| 青青青国产依人精品视频| 久久国产成人精品麻豆| 麻豆精品成人免费国产片| 嫩草影院久久国产精品| 国产精品毛片无遮挡| 亚洲AV永久青草无码精品| 久久精品国产亚洲av四虎| 亚洲高清国产拍精品26U| 久久精品加勒比中文字幕| 午夜精品久久久久久久| 人妻少妇精品中文字幕av蜜桃| 99国产精品视频免费观看| 亚洲精品午夜久久久伊人| 精品久久久久久亚洲精品| 98视频精品全部国产| 久久精品国产导航| 在线观看国产精品麻豆| 国产成人精品高清免费|