觸屏已經(jīng)是我們身邊電子設(shè)備的常態(tài)了。觸摸事件當(dāng)然也是隨著觸屏的出現(xiàn),用戶使用最多的事件啦!
難道使用觸屏事件后,其他原來的鼠標(biāo)事件就都不能用啦?當(dāng)然不是,只不過不是那么好用啊。
10多年的江夏網(wǎng)站建設(shè)經(jīng)驗(yàn),針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù),響應(yīng)快,48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同,自動(dòng)調(diào)整江夏建站的顯示方式,使網(wǎng)站能夠適用不同顯示終端,在瀏覽器中調(diào)整網(wǎng)站的寬度,無論在任何一種瀏覽器上瀏覽網(wǎng)站,都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì),從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“江夏網(wǎng)站設(shè)計(jì)”,“江夏網(wǎng)站推廣”以來,每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
針對(duì)鼠標(biāo)事件,有哪些不適應(yīng)?
dbclick
觸屏設(shè)備不支持雙擊事件。雙擊瀏覽器窗口,會(huì)放大畫面。
可以通過在head標(biāo)簽內(nèi)加上這么一行:
可以實(shí)現(xiàn),我們編寫的頁面不會(huì)隨著用的手勢(shì)而放大縮小。
關(guān)于meta
標(biāo)簽,我還沒有研究過,罪過啊。
mouse
在觸屏上,我們單擊一個(gè)元素,會(huì)相應(yīng)的觸發(fā):mousemove
mousedown
mouseup
click
,所以當(dāng)我們編寫移動(dòng)客戶端界面時(shí),可以為元素直接添加move事件,可以提高效率。
同時(shí)也會(huì)觸發(fā)mouseover
與mouseout
,測(cè)試結(jié)果,我發(fā)現(xiàn),只有當(dāng)頁面第一次刷新時(shí),單擊元素,參會(huì)觸發(fā)mouseover事件。
隨著觸屏移動(dòng)端設(shè)備的普及使用,W3C開始制定TouchEvent規(guī)范。
觸摸事件
該類事件會(huì)在用戶手指放在屏幕上面時(shí),在屏幕上滑動(dòng)時(shí),或從屏幕上移開時(shí)觸發(fā)。具體來說有以下幾個(gè)觸摸事件。
1、touchstart
當(dāng)手指放在屏幕上觸發(fā)。
2、touchmove
當(dāng)手指在屏幕上滑動(dòng)時(shí),連續(xù)地觸發(fā)。
3、touchend
當(dāng)手指從屏幕上離開時(shí)觸發(fā)。
4、touchcancel
當(dāng)系統(tǒng)停止跟蹤時(shí)觸發(fā),系統(tǒng)什么時(shí)候取消,文檔沒有明確的說明。
【總】以上四個(gè),是w3c提供的觸摸事件,只針對(duì)觸摸設(shè)備,最常用的是前三個(gè)。
由于觸摸會(huì)導(dǎo)致屏幕動(dòng)來動(dòng)去,所以可以會(huì)在這些事件的事件處理函數(shù)內(nèi)使用event.preventDefault()
,來阻止屏幕的默認(rèn)滾動(dòng)。
除了常用的DOM屬性,觸摸事件還包含下列三個(gè)用于跟蹤觸摸的屬性。
1、touches:表示當(dāng)前跟蹤的觸摸操作的touch對(duì)象的數(shù)組。
當(dāng)一個(gè)手指在觸屏上時(shí),event.touches.length=1,
當(dāng)兩個(gè)手指在觸屏上時(shí),event.touches.length=2,以此類推。
2、targetTouches:特定于事件目標(biāo)的touch對(duì)象數(shù)組。
因?yàn)閠ouch事件是會(huì)冒泡的,所以利用這個(gè)屬性指出目標(biāo)對(duì)象。
3、changedTouches:表示自上次觸摸以來發(fā)生了什么改變的touch對(duì)象的數(shù)組。
每個(gè)touch對(duì)象都包含下列幾個(gè)屬性:
4、clientX:觸摸目標(biāo)在視口中的x坐標(biāo)。
clientY:觸摸目標(biāo)在視口中的y坐標(biāo)。
identifier:標(biāo)識(shí)觸摸的唯一ID。
pageX:觸摸目標(biāo)在頁面中的x坐標(biāo)。
pageY:觸摸目標(biāo)在頁面中的y坐標(biāo)。
screenX:觸摸目標(biāo)在屏幕中的x坐標(biāo)。
screenY:觸摸目標(biāo)在屏幕中的y坐標(biāo)。
target:觸摸的DOM節(jié)點(diǎn)目標(biāo)。
【如何使用呢?】
EventUtil.addHandler(div,"touchstart",function(event){ div.innerHTML=event.touches[0].clientX+','+event.touches[0].clientY; }); EventUtil.addHandler(div,"touchmove",function(event){ event.preventDefault(); div.innerHTML=event.touches[0].clientX; }); EventUtil.addHandler(div,"touchend",function(event){ div.innerHTML=event.changedTouches[0].clientY; });
使用clientX……時(shí),必須要指明具體的touch對(duì)象,而不要直接指明數(shù)組。
event.touches[0]
在touchend
事件處理函數(shù)中,當(dāng)該事件發(fā)生時(shí),touches里面已經(jīng)沒有任何的touch對(duì)象了,此時(shí),就要使用changeTouches集合。
手勢(shì)事件
【注意】只有兩個(gè)手指都觸摸到事件的接收容器時(shí)才觸發(fā)這些手勢(shì)事件。
觸摸事件與手勢(shì)事件之間的關(guān)系
1、當(dāng)一個(gè)手指放在屏幕上時(shí),會(huì)觸發(fā)touchstart
事件,如果另一個(gè)手指又放在了屏幕上,則會(huì)觸發(fā)gesturestart
事件,隨后觸發(fā)基于該手指的touchstart
事件。
2、如果一個(gè)或兩個(gè)手指在屏幕上滑動(dòng),將會(huì)觸發(fā)gesturechange
事件,但只要有一個(gè)手指移開,則會(huì)觸發(fā)gestureend
事件,緊接著又會(huì)觸發(fā)toucheend
事件。
手勢(shì)的專有屬性
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
分享名稱:JS觸摸事件、手勢(shì)事件詳解
瀏覽地址:http://muchs.cn/article4/ghjcoe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、自適應(yīng)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)