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ō)。
- 淺談移動(dòng)端之js touch事件 手勢(shì)滑動(dòng)事件
- 淺談javascript的Touch事件
- javascript移動(dòng)設(shè)備Web開(kāi)發(fā)中對(duì)touch事件的封裝實(shí)例
- js實(shí)現(xiàn)touch移動(dòng)觸屏滑動(dòng)事件
- javascript移動(dòng)開(kāi)發(fā)中touch觸摸事件詳解
- 移動(dòng)設(shè)備手勢(shì)事件庫(kù)Touch.js使用詳解
- 手機(jī)端點(diǎn)擊圖片放大特效PhotoSwipe.js插件實(shí)現(xiàn)
- JS前端開(kāi)發(fā)判斷是否是手機(jī)端并跳轉(zhuǎn)操作(小結(jié))
- JS模仿手機(jī)端九宮格登錄功能實(shí)現(xiàn)代碼
- JS手機(jī)端touch事件計(jì)算滑動(dòng)距離的方法示例
相關(guān)文章
JS+canvas實(shí)現(xiàn)的五子棋游戲【人機(jī)大戰(zhàn)版】
這篇文章主要介紹了JS+canvas實(shí)現(xiàn)的五子棋游戲,是采用比較強(qiáng)的AI實(shí)現(xiàn)的人機(jī)大戰(zhàn)版游戲,涉及javascript結(jié)合HTML5實(shí)現(xiàn)圖形繪制與人工智能相關(guān)操作技巧,需要的朋友可以參考下2017-07-07js實(shí)現(xiàn)非常簡(jiǎn)單的焦點(diǎn)圖切換特效實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)非常簡(jiǎn)單的焦點(diǎn)圖切換特效,是一個(gè)非常簡(jiǎn)單的js焦點(diǎn)圖切換效果,涉及javascript操作鼠標(biāo)事件與圖片的相關(guān)技巧,需要的朋友可以參考下2015-05-05原生js實(shí)現(xiàn)移動(dòng)小球(碰撞檢測(cè))
這篇文章主要介紹了原生js實(shí)現(xiàn)會(huì)動(dòng)的小球,碰撞檢測(cè)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12JS實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)特效代碼
這篇文章主要為大家詳細(xì)介紹了一款轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)的JS特效代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-08-08基于RequireJS和JQuery的模塊化編程——常見(jiàn)問(wèn)題全面解析
下面小編就為大家?guī)?lái)一篇基于RequireJS和JQuery的模塊化編程——常見(jiàn)問(wèn)題全面解析。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04簡(jiǎn)單了解JavaScript中常見(jiàn)的反模式
這篇文章主要介紹了簡(jiǎn)單了解JavaScript中常見(jiàn)的反模式,反模式 是指對(duì)反復(fù)出現(xiàn)的設(shè)計(jì)問(wèn)題的常見(jiàn)的無(wú)力而低效的設(shè)計(jì)模式,俗話說(shuō)就是重蹈覆轍。 這篇文章描述了 JavaScript 中常見(jiàn)的一些反模式,以及避免它們的辦法。,需要的朋友可以參考下2019-06-06微信小程序把百度地圖坐標(biāo)轉(zhuǎn)換成騰訊地圖坐標(biāo)過(guò)程詳解
這篇文章主要介紹了微信小程序把百度地圖坐標(biāo)轉(zhuǎn)騰訊地圖坐標(biāo)過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07