js的touch事件的實際引用

2024-05-06 16:09:36

字體：大中小

來源：轉載

供稿：網友

研究移動端頁面的觸屏滑動事件，搜索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:當手指觸摸屏幕時觸發(fā)；即使已經有一個手指放在了屏幕上也會觸發(fā)。
touchmove:當手指在屏幕上滑動時連續(xù)的觸發(fā)。在這個事件發(fā)生期間，調用preventDefault()可阻止?jié)L動。
touchend:當手指從屏幕上移開時觸發(fā)。
touchcancel:當系統(tǒng)停止跟蹤觸摸時觸發(fā)。關于此事件的確切觸發(fā)事件，文檔中沒有明確說明。

以上事件的event對象上面都存在如下屬性：
touches:表示當前跟蹤的觸摸操作的Touch對象的數組。
targetTouches:特定于事件目標的Touch對象的數組。
changeTouches:表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數組。

每個Touch對象包含下列屬性：
clientX:觸摸目標在視口中的X坐標。
clientY:觸摸目標在視口中的Y坐標。
identifier：表示觸摸的唯一ID。
pageX：觸摸目標在頁面中的x坐標。
pageY：觸摸目標在頁面中的y坐標。
screenX:觸摸目標在屏幕中的x坐標。
screenY:觸摸目標在屏幕中的y坐標。
target:觸摸的DOM節(jié)點坐標

好吧，我其實也剛開始學，反正先把一些百度來的屬性記下來再說。

上一篇：form.submit()不能提交表單的錯誤原因及解決方法

下一篇：jquery引用方法時傳遞參數原理分析