關於Touch事件

2021-08-25 02:46:13 字數 1729 閱讀 9366

一、touch事件

touchstart:當手指觸碰到螢幕的時候觸發

繫結事件的方法:dom.addeventlistener(「touchstart」, function(e){});

事件返回的e物件包含那些移動端特有的屬性:

targettouches 目標元素的所有當前觸控

changedtouches 頁面上最新更改的所有觸控

touches 頁面上的所有觸控

touchmove:當手指在螢幕上滑動時連續觸發

繫結事件的方法:dom.addeventlistener(「touchmove」, function(e){});

事件返回的e物件包含那些移動端特有的屬性:

originalevent 是jquery 封裝的事件。

targettouches 目標元素的所有當前觸控

changedtouches 頁面上最新更改的所有觸控

touches 頁面上的所有觸控

在滑動的時候不斷給盒子做定位,來達到滑動的效果

定位的位置,當前的的定位加上移動的距離

在開始滑動的時候就要清楚定時器,move的時候清除過渡,-index*width + distancex

touchend:當手指在螢幕上結束滑動時觸發

繫結事件的方法:dom.addeventlistener(「touchend」, function(e){});

事件返回的e物件包含那些移動端特有的屬性:

changedtouches 頁面上最新更改的所有觸控

touchcancel:系統停止跟蹤觸控時候會觸發,系統被動終止,例如alert。

注意:在touchend事件的時候event只會記錄changedtouches

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

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

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

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

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

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

二、過渡和動畫結束時間

1、transitionend:過渡結束後觸發。

繫結事件的方法:

dom.addeventlistener(「webkittransitionend」, function(e){});

dom.addeventlistener(「transitionend」, function(e){});

2、animationend:動畫結束後觸發。

繫結事件的方法:

dom.addeventlistener(「webkitanimationend」, function(e){});

dom.addeventlistener(「animationend」, function(e){});

3、gesture事件

gesturestart:當乙個手指觸控螢幕之後,第二個手指再觸控螢幕時觸發。

gesturechange:當上面的事件觸發後立即觸發。

gestureend:第二根手指離開螢幕時觸發,之後將不會再次觸發gesturechange。

在event當中會返回另外兩個引數

scale 根據兩個手指的滑動距離計算的縮放比例 初始1

rotation根據兩個手指的滑動距離計算的旋轉角度 初始 0

4、全屏單頁布局: html,body

touch事件分析

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

touch事件傳遞

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

touch事件應用

js的touch事件,一般用於移動端的觸屏滑動 function function touch event touchstart 當手指觸控螢幕時觸發 即使已經有乙個手指放在了螢幕上也會觸發。touchmove 當手指在螢幕上滑動時連續的觸發。在這個事件發生期間,呼叫preventdefault 可...