關於JS的觸控方法

2021-08-28 02:13:11 字數 1292 閱讀 7488

js的touch事件,一般用於移動端的觸屏滑動
$(function()); 

function _touch(event)

touchstart:當手指觸控螢幕時觸發;即使已經有乙個手指放在了螢幕上也會觸發。          

touchmove:當手指在螢幕上滑動時連續的觸發。在這個事件發生期間,呼叫preventdefault()可阻止滾動。

touchend:當手指從螢幕上移開時觸發。

touchcancel:當系統停止跟蹤觸控時觸發。關於此事件的確切觸發事件,文件中沒有明確說明。

touches:表示當前跟蹤的觸控操作的touch物件的陣列。             

targettouches:特定於事件目標的touch物件的陣列。

changetouches:表示自上次觸控以來發生了什麼改變的touch物件的陣列。

clientx:觸控目標在視口中的x座標。                       

clienty:觸控目標在視口中的y座標。

identifier:表示觸控的唯一id。

pagex:觸控目標在頁面中的x座標。

pagey:觸控目標在頁面中的y座標。

screenx:觸控目標在螢幕中的x座標。

screeny:觸控目標在螢幕中的y座標。

target:觸控的dom節點座標

/**

* created by 晴小篆-顏樂 on 2017/1/26.

* 移動端觸控控制移動

* function('元素名稱',上邊距,下邊距)

*/module.exports = function touch(element, top, bottom) );

btn.addeventlistener('touchmove', function (e) );

btn.addeventlistener('touchend', function (e) else

if (endy < topline) else if (endy > bottomline) else

})}

原始碼請見:關於js的觸控方法

js 觸控的Event 獲取觸控位置

touch有3個事件 touchstart,touchmove,touchend,移動端不能用click,這涉及到click的300ms的延遲問題。但是又沒有原生的tap,所以zepto的touch庫一直被用。還有左滑,右滑螢幕,都是不錯的。div id drag div drag接下來是它的eve...

js 觸控事件

var jc 0 document.addeventlistener touchstart function event false document.addeventlistener touchmove function event false document.addeventlistener ...

JS中的觸控事件

觸控事件與滑鼠事件相比有兩個不同點 1 滑鼠游標只有乙個,而觸控點可能有很多 2 滑鼠游標可以懸停,而觸控點則不行。事件型別 是否可以取消 是否走完整個冒泡式出發過程 描述瀏覽器對該事件的預設處理方式 touchstart是是 使用者將某個觸控點置於觸控介面之上 未定義touchmove是是 使用者...