touch事件應用

2021-08-01 06:55:34 字數 1835 閱讀 5423

js的touch事件,一般用於移動端的觸屏滑動:

$(function()) function _touch(event)

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節點座標

簡單應用案例:

1

<

body

>

2<

span

id="test_box"

style

="position:fixed;left:0px;top:0px;background-color:gainsboro;padding:15px;"

>123

span

>

3<

script

>4//

addeventlistener() 方法用於向指定元素新增事件控制代碼。 使用 removeeventlistener() 方法來移除 addeventlistener() 方法新增的事件控制代碼。56

"touchstart",touch_start,false);7//

document.addeventlistener("touchmove",touch_move,false);8//

document.addeventlistener("touchend",touch_end,false);9//

document.addeventlistener("touchcancel",touch_cancel,false);

1011

function

touch_start(event)

1415

function

touch_move(event)

1819

function

touch_end(event)

2223

function

touch_cancel(event)

2627

28//

應用示例,單個手指拖動盒子

29var

obj

=document.getelementbyid(

"test_box");

30obj.addeventlistener(

'touchmove',

function

(event)

3139

}, false

);40

script

>

41body

>

touch事件分析

事件分發 public boolean dispatchtouchevent motionevent ev touch 事件發生時 activity 的 dispatchtouchevent motionevent ev 方法會以隧道方式 從根元素依次往下傳遞直到最內層子元素或在中間某一元素中由於某...

touch事件傳遞

首先設計到下面4個方法 先後順數也是這麼執行的,dispatchtouchevent 分發 onintercepttouchevent 攔截 ontouch 觸控 ontouchevent 觸控事件 1 首先講述一下 ontouch ontouchevent 的區別 ontouch 是 view o...

Touch事件分發

1.0touch事件傳遞機制 touch事件分發 根據自身需要事件需要那層處理,來實現效果,分配事件需要交給那層來處理。首先 事件都是從 activity傳遞到view在傳遞到子view 由上到 下傳遞,activity是董事長 view是經理 子view是員工 事件有三種 攔截消費分發 假如乙個任...