06 移動端事件

// touchstart：當手指在指定元素按下的時候觸發

div.addeventlistener('touchstart',function

(),false)/*
ture表示事件捕獲，false表示事件冒泡，false時可省略
*/

// touchmove：當手指在指定元素按下並移動的時候觸發。（一般會觸發多次）

div.addeventlistener('touchmove',function

())

// touchend：當手指鬆開的時候觸發。（與touchstart關聯）

div.addeventlistener('touchend',function

())

// touchcancel：使用者互動操作被系統中斷時觸發。（如互動時，**來了並直接跳轉過去時）

div.addeventlistener('touchcancel',function

())

//touchstart、touchmove、touchend 中的event物件屬性相同

altkey：當此屬性為true時，表示點選的時候同時按住了alt鍵。一般為false

bubbles：表示當前是否冒泡，是就為true
cancelbubble：表示當前是否已經取消了冒泡，取消了就true
cancelable：表示當前是否可以取消冒泡，可以取消就true
type：裡面顯示當前是touch的哪個狀態，如touchstart、touchmove、touchend等等。
target：裡面顯示當前是哪個html元素觸發的事件，如div#qq

//觸控的列表，裡面包含了目標元素裡並產生移動等操作的手指資訊，如

0: ......//

第1根手指的資訊。
1: ...      //
第2根手指的資訊
length: ...  //
裡面表示有多少個手指的資訊

//觸控的列表，裡面包含了目標元素中的所有手指資訊，裡面屬性資訊同上

//觸控的列表，裡面包含了螢幕上所有手指的資訊，裡面屬性資訊同上

//

在touchstart、touchmove時上面3個都能檢測到手指資訊
//但是在touchend時，螢幕上沒有了手指資訊（touches檢測不到手指），目標元素上也沒有手指資訊（targettouches檢測不到手指），只有changedtouches留下了發生改變的手指（發生move、end等操作的手指）
//所以一般使用changedtouches來獲取手指資訊就比較好

clientx：螢幕上手指的x座標（不算滾動條）

clienty：螢幕上手指的y座標（不算滾動條）
pagex：手指的x座標（算滾動條）
pagey：手指的y座標（算滾動條）
identifier：手指的唯一識別符號，如0、1、2等等
radiusx：手指觸控螢幕的半徑
radiusy：手指觸控螢幕的半徑
rotationangle：旋轉角度

//先自己定義各個bb元素即可，看自己需求可加個固定定位使用

var now = ;

bb.ontouchstart = function
(event)
'開始橫座標'+start.x+'，開始縱座標'+start.y)
}bb.ontouchmove = function
(event)
'移動的橫座標'+move.x+'，移動的縱座標'+move.y);
translate = 
//開始移動
bb.style.transform = 'translate3d('+translate.x+'px,'+translate.y+'px,0)';
}        
bb.ontouchend = function(event)

//若需要監聽移動端的各種事件可以用 錘子來監聽

hammer.js：

hammer是乙個開放源**庫，可以識別由觸控，滑鼠和pointerevents做出的手勢。

它沒有任何依賴關係，並且很小，只有

7.34 kb壓縮+壓縮！

引入：

新建物件：

var hammertime = new

hammer(myelement, myoptions);
hammertime.on('pan', function
(ev) );

除了pan之外，還有很多可以監聽的引數（可以一下監聽多個引數），如：

pan：滑動

swipe：快速滑動
swipeleft：左滑
swiperight：右滑
tap：點選
doubletap：雙擊
press：長按
pinch：捏
rotate：旋轉

具體使用

<

div 
id="bb"
>
div>

var hammertime = new

hammer(bb);
hammertime.on('pan', function
(ev) );

移動端事件

移動端事件 onclick 移動端也可以使用onclick事件，但是查閱資料上說會有300ms的延遲，究竟是不是有待考究。ontouchstart 相當於pc端的onmousedown，詳細可參照先前寫的文件 事件 下同 ontouchend 相當於pc端的onmouseup.ontouchmove...

移動端事件

一 touch 1 touchstart 當手指觸碰螢幕時發生，不管當前多少根手指 2 touchmove 當手指在螢幕上滑動時連續觸發，通常我們在滑屏頁面，會呼叫event的preventdefault 可以阻止預設情況的發生 阻止頁面滾動 3 touchend 當手指離開螢幕時觸發 4 touc...

移動端事件（一） 移動端事件和物件

在我們開始用原聲js寫移動端輪播前，我們先了解一些移動端的基礎。touch事件 touchevents物件 滑屏的思想與實現 移動端touch事件 let box document.queryselector box touchstart mousedown 手指觸碰元素 touchmove mou...