移動端事件

一、首先要添加移動端meat標籤        

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    

width：視口的寬度，width=device-width：寬度是設備的寬度        

initial-scale：初始化縮放，- initial-scale=1.0：不縮放      

user-scalable：是否容許用戶自行縮放，取值0或1，yes或no        

minimum-scale：最小縮放        

maximum-scale：最大縮放        

通常設置了不容許縮放，就不必設置最大最小縮放了。

二、移動端的三個事件        

touch觸摸事件要用DOM2級綁定事件；移動端也支持onclick鼠標點擊事件，可是會有300ms的延遲        

①touchstart()觸摸事件    

②touchmove()觸摸移動事件    

③touchend()觸摸離開事件

三、移動端事件對象        

touchstart和touchmove須要經過e.touches獲取手指的觸摸信息    

touchend須要e.changedTouches獲取手指的觸摸信息  

案例：

 1     box.addEventListener("touchstart",function(e) {
 2             var a = e.touches[0].clientX;//手指觸摸時的座標
 3             console.log(a)
 4     },false)
 5     box.addEventListener("touchmove",function(e) {
 6             var b = e.touches[0].clientX;//手指移動時的座標
 7             console.log(b)
 8     })
 9     box.addEventListener("touchend",function(e) {
10             var c = e.changedTouches[0].clientX;//手指離開時的座標
11             console.log(c)
12     })    

 

 四、過渡事件和動畫事件        

①過渡事件transitioned，元素過渡完成的時候執行     

// 過分事件
    box.addEventListener("transitionend", function() {
                console.log("過分完成")
        })

②動畫事件animationstart，動畫開始時觸發          

　動畫事件animationend，動畫結束時觸發     

// 動畫開始事件
    box1.addEventListener("animationstart", function() {
        console.log("動畫開始")
   })
// 動畫結束事件
   box1.addEventListener("animationend", function() {
       console.log("動畫結束")
   })