首頁 > web前端 > js教程 > js的touch事件的實際引用

js的touch事件的實際引用

PHPz
發布: 2018-09-30 15:01:34
原創
1536 人瀏覽過

研究行動版頁面的觸控滑動事件,搜尋jquery 的對應技術支援實在繁瑣,而js只需幾步簡單定義即可,以下與大家分享下js的touch事件的實際引用。

一開始做前端頁面的時候,接觸的也是js,但是隨後便被簡單高效的jquery吸引過去,並一直使用至今。

而js,則被我主觀的認為底層技術而拋棄。

直到這幾天工作需要,研究行動裝置頁面的觸控螢幕滑動事件,搜尋jquery 的相應技術支援實在繁瑣(當然也可能是我對jquery的理解不夠),而js只需幾步簡單定義即可。

由於對js的了解比較少,最簡單的應用我都試了很久…下面就分享下js的touch事件的實際引用:

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

function _touch(event){
alert(1);
}
登入後複製

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

對應的事件有:

touchstart:當手指觸摸螢幕時觸發;即使已經有一個手指放在了螢幕上也會觸發。
touchmove:當手指在螢幕上滑動時連續的觸發。在這個事件發生期間,呼叫preventDefault()可阻止捲動。
touchend:當手指從螢幕移開時觸發。
touchcancel:當系統停止追蹤觸控時觸發。關於此事件的確切觸發事件,文件中沒有明確說明。

以上事件的event物件上面都存在如下屬性:

touches:表示目前追蹤的觸控操作的Touch物件的陣列。
targetTouches:特定於事件目標的Touch物件的陣列。
changeTouches:表示自上次觸碰以來發生了什麼改變的Touch物件的陣列。

每個Touch物件包含下列屬性:

clientX:觸碰目標在視口中的X座標。
clientY:觸碰目標在視窗中的Y座標。
identifier:表示觸碰的唯一ID。
pageX:觸碰目標在頁面中的x座標。
pageY:觸碰目標在頁面中的y座標。
screenX:觸碰目標在螢幕中的x座標。
screenY:觸碰目標在螢幕中的y座標。
target:觸摸的DOM節點座標

以上就是本章的全部內容,更多相關教學請訪問JavaScript影片教學

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板