希岛爱理av免费一区二区,成人性教育av免费网址,欧美7777,在线免费日韩片

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

百恒網絡

南昌百恒網絡

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

百恒網絡 2017-01-07 21178

前面我們介紹過移動設備中一些設備事件,例如手機旋轉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.527701.com/如轉載請注明出處!

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

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

 
 
 
 
 
 
 
 
×
主站蜘蛛池模板: 扶沟县| 水富县| 扎鲁特旗| 张掖市| 常宁市| 湘阴县| 四会市| 平南县| 永顺县| 广平县| 新田县| 河南省| 房产| 聂荣县| 新民市| 景泰县| 烟台市| 张家界市| 隆化县| 儋州市| 荣昌县| 黄陵县| 峨山| 泾川县| 汝州市| 准格尔旗| 无锡市| 建平县| 江油市| 安达市| 亚东县| 罗源县| 沈阳市| 怀柔区| 越西县| 五峰| 罗定市| 申扎县| 麻江县| 邓州市| 五莲县|