上万部爽片,立即观看,在线观看,日韩av无码久久精品免费,欧美性受xxxx喷潮,欧洲男同gay,日韩精品一区二区三区

十年專注于品牌網(wǎng)站建設(shè) 十余年專注于網(wǎng)站建設(shè)_小程序開發(fā)_APP開發(fā)，低調(diào)、敢創(chuàng)新、有情懷！
南昌百恒網(wǎng)絡(luò)微信公眾號(hào) 掃一掃關(guān)注
小程序
tel-icon全國(guó)服務(wù)熱線：400-680-9298,0791-88117053
掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)
掃一掃打開百恒網(wǎng)絡(luò)微信小程序

百恒網(wǎng)絡(luò)

南昌百恒網(wǎng)絡(luò)

觸摸事件中touchstar、touchmove、touchend、touchcancel事件應(yīng)用方法及實(shí)例

百恒網(wǎng)絡(luò) 2017-01-07 21145

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



? ? ? ?Touch Events Example
? ? ? ?


? ? ? ?

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


? ? ? ?
?
? ? ? ?

? ? ? ?


? ? ? ?以上代碼會(huì)跟蹤屏幕上發(fā)生的一次觸摸操作。為簡(jiǎn)單起見，只會(huì)在有一次活動(dòng)觸摸操作的情況下輸 出信息。當(dāng) touchstart 事件發(fā)生時(shí)，會(huì)將觸摸的位置信息輸出到
元素中。當(dāng) touchmove 事件 發(fā)生時(shí)，會(huì)取消其默認(rèn)行為，阻止?jié)L動(dòng)（觸摸移動(dòng)的默認(rèn)行為是滾動(dòng)頁(yè)面），然后輸出觸摸操作的變化 信息。而 touchend 事件則會(huì)輸出有關(guān)觸摸操作的終信息。注意，在 touchend 事件發(fā)生時(shí)，touches 集合中就沒有任何 Touch 對(duì)象了，因?yàn)椴淮嬖诨顒?dòng)的觸摸操作；此時(shí)，就必須轉(zhuǎn)而使用 changeTouchs 集合。?
? ? ? ?這些事件會(huì)在文檔的所有元素上面觸發(fā)，因而可以分別操作頁(yè)面的不同部分。在觸摸屏幕上的元素 時(shí)，這些事件（包括鼠標(biāo)事件）發(fā)生的順序如下：?
? ? ? ?(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支持多點(diǎn)觸摸。 桌面版 Firefox 6+和 Chrome也支持觸摸事件。?
? 本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣大技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)http://syshcw.cn/如轉(zhuǎn)載請(qǐng)注明出處!

400-680-9298,0791-88117053
掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)
掃一掃打開百恒網(wǎng)絡(luò)小程序

歡迎您的光顧，我們將竭誠(chéng)為您服務(wù)×

 
 
 
 
 
 
 
 
×