js的touch事件的實(shí)際引用

更新時(shí)間：2014年10月13日 16:56:34 投稿：whsnow

研究移動(dòng)端頁(yè)面的觸屏滑動(dòng)事件，搜索jquery 的相應(yīng)技術(shù)支持實(shí)在繁瑣，而js只需幾步簡(jiǎn)單定義即可，下面與大家分享下js的touch事件的實(shí)際引用

一開(kāi)始做前端頁(yè)面的時(shí)候，接觸的也是js，但是隨后便被簡(jiǎn)單高效的jquery吸引過(guò)去，并一直使用至今。

而js，則被我主觀的認(rèn)為底層技術(shù)而拋棄。

直到這幾天工作需要，研究移動(dòng)端頁(yè)面的觸屏滑動(dòng)事件，搜索jquery 的相應(yīng)技術(shù)支持實(shí)在繁瑣（當(dāng)然也可能是我對(duì)jquery的理解不夠），而js只需幾步簡(jiǎn)單定義即可。

由于對(duì)js的了解比較少，最簡(jiǎn)單的應(yīng)用我都試了很久……下面就分享下js的touch事件的實(shí)際引用：

$(function(){
document.addEventListener("touchmove", _touch, false);
})

function _touch(event){
alert(1);
}

以上代碼不可避免的使用了jquery的某些東西，不使用jquery的可以忽略之。

相應(yīng)的事件有：

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)手指從屏幕上移開(kāi)時(shí)觸發(fā)。
touchcancel:當(dāng)系統(tǒng)停止跟蹤觸摸時(shí)觸發(fā)。關(guān)于此事件的確切觸發(fā)事件，文檔中沒(méi)有明確說(shuō)明。

以上事件的event對(duì)象上面都存在如下屬性：
touches:表示當(dāng)前跟蹤的觸摸操作的Touch對(duì)象的數(shù)組。
targetTouches:特定于事件目標(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：表示觸摸的唯一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)

好吧，我其實(shí)也剛開(kāi)始學(xué)，反正先把一些百度來(lái)的屬性記下來(lái)再說(shuō)。

您可能感興趣的文章:

touch

相關(guān)文章

JS獲取及驗(yàn)證開(kāi)始結(jié)束日期的方法
這篇文章主要介紹了JS獲取及驗(yàn)證開(kāi)始結(jié)束日期的方法.涉及javascript針對(duì)日期的獲取、比較及判斷等技巧,需要的朋友可以參考下
2016-08-08
詳解用Webpack與Babel配置ES6開(kāi)發(fā)環(huán)境
這篇文章主要介紹了詳解用Webpack與Babel配置ES6開(kāi)發(fā)環(huán)境，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
JavaScript實(shí)現(xiàn)經(jīng)典排序算法之插入排序
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)經(jīng)典排序算法之插入排序，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
將數(shù)字轉(zhuǎn)換成大寫(xiě)的人民幣表達(dá)式的js函數(shù)
將數(shù)字轉(zhuǎn)換成大寫(xiě)的人民幣，方法有很多，本例介紹的是使用js來(lái)完成的，有需要的朋友可以參考下
2014-09-09
小程序指紋驗(yàn)證的實(shí)現(xiàn)代碼
這篇文章主要介紹了小程序指紋驗(yàn)證的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
javascript 日期工具匯總
這篇文章主要為大家詳細(xì)介紹了javaScript日期工具類的匯總，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
javascript編程開(kāi)發(fā)中取色器及封裝$函數(shù)用法示例
這篇文章主要介紹了javascript編程開(kāi)發(fā)中取色器及封裝$函數(shù),結(jié)合實(shí)例形式分析了javascript封裝$函數(shù)及數(shù)值運(yùn)算、頁(yè)面元素動(dòng)態(tài)操作實(shí)現(xiàn)取色器功能相關(guān)技巧,需要的朋友可以參考下
2017-08-08
Cookie 注入是怎樣產(chǎn)生的
現(xiàn)在很多網(wǎng)站都加了防注入系統(tǒng)代碼，你輸入注入語(yǔ)句將無(wú)法注入~~感覺(jué)這樣的防注入系統(tǒng)不錯(cuò)，但防注入系統(tǒng)沒(méi)有注意到 Cookies 的問(wèn)題！所以就有了Cookies注入~~
2009-04-04
利用原生js模擬直播彈幕滾動(dòng)效果
彈幕是一個(gè)很常見(jiàn)的功能,這篇文章主要給大家介紹了關(guān)于如何利用原生js模擬直播彈幕滾動(dòng)效果的相關(guān)資料,文章通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-07-07
JavaScript 浮動(dòng)定位提示效果實(shí)現(xiàn)代碼
本來(lái)想做一個(gè)集合浮動(dòng)定位和鼠標(biāo)跟隨的tooltips效果，但發(fā)現(xiàn)定位和鼠標(biāo)跟隨在一些關(guān)鍵的地方還是不同的，還是分開(kāi)來(lái)吧。
2009-09-09