js的touch事件的實際引用
一開始做前端頁面的時候,接觸的也是js,但是隨后便被簡單高效的jquery吸引過去,并一直使用至今。
而js,則被我主觀的認(rèn)為底層技術(shù)而拋棄。
直到這幾天工作需要,研究移動端頁面的觸屏滑動事件,搜索jquery 的相應(yīng)技術(shù)支持實在繁瑣(當(dāng)然也可能是我對jquery的理解不夠),而js只需幾步簡單定義即可。
由于對js的了解比較少,最簡單的應(yīng)用我都試了很久……下面就分享下js的touch事件的實際引用:
$(function(){
document.addEventListener("touchmove", _touch, false);
})
function _touch(event){
alert(1);
}
以上代碼不可避免的使用了jquery的某些東西,不使用jquery的可以忽略之。
相應(yīng)的事件有:
touchstart:當(dāng)手指觸摸屏幕時觸發(fā);即使已經(jīng)有一個手指放在了屏幕上也會觸發(fā)。
touchmove:當(dāng)手指在屏幕上滑動時連續(xù)的觸發(fā)。在這個事件發(fā)生期間,調(diào)用preventDefault()可阻止?jié)L動。
touchend:當(dāng)手指從屏幕上移開時觸發(fā)。
touchcancel:當(dāng)系統(tǒng)停止跟蹤觸摸時觸發(fā)。關(guān)于此事件的確切觸發(fā)事件,文檔中沒有明確說明。
以上事件的event對象上面都存在如下屬性:
touches:表示當(dāng)前跟蹤的觸摸操作的Touch對象的數(shù)組。
targetTouches:特定于事件目標(biāo)的Touch對象的數(shù)組。
changeTouches:表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數(shù)組。
每個Touch對象包含下列屬性:
clientX:觸摸目標(biāo)在視口中的X坐標(biāo)。
clientY:觸摸目標(biāo)在視口中的Y坐標(biāo)。
identifier:表示觸摸的唯一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é)點坐標(biāo)
好吧,我其實也剛開始學(xué),反正先把一些百度來的屬性記下來再說。
相關(guān)文章
JS+canvas實現(xiàn)的五子棋游戲【人機大戰(zhàn)版】
這篇文章主要介紹了JS+canvas實現(xiàn)的五子棋游戲,是采用比較強的AI實現(xiàn)的人機大戰(zhàn)版游戲,涉及javascript結(jié)合HTML5實現(xiàn)圖形繪制與人工智能相關(guān)操作技巧,需要的朋友可以參考下2017-07-07
JS實現(xiàn)轉(zhuǎn)動隨機數(shù)抽獎特效代碼
這篇文章主要為大家詳細介紹了一款轉(zhuǎn)動隨機數(shù)抽獎的JS特效代碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2015-08-08
基于RequireJS和JQuery的模塊化編程——常見問題全面解析
下面小編就為大家?guī)硪黄赗equireJS和JQuery的模塊化編程——常見問題全面解析。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-04-04
微信小程序把百度地圖坐標(biāo)轉(zhuǎn)換成騰訊地圖坐標(biāo)過程詳解
這篇文章主要介紹了微信小程序把百度地圖坐標(biāo)轉(zhuǎn)騰訊地圖坐標(biāo)過程詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07

