移动端事件

1、首先要添加移动端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：最大缩放        

一般设置了不允许缩放，就没必要设置最大最小缩放了。

2、移动端的三个事件        

touch触摸事件要用DOM2级绑定事件；移动端也支持onclick鼠标点击事件，但是会有300ms的延迟        

①touchstart()触摸事件    

②touchmove()触摸移动事件    

③touchend()触摸离开事件

3、移动端事件对象        

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     })    

 

 4、过渡事件和动画事件        

①过渡事件transitioned，元素过渡完成的时候执行     

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

②动画事件animationstart，动画开始时触发          

　动画事件animationend，动画结束时触发     

// 动画开始事件
    box1.addEventListener("animationstart", function() {
        console.log("动画开始")
   })
// 动画结束事件
   box1.addEventListener("animationend", function() {
       console.log("动画结束")
   })

 

转载于:https://www.cnblogs.com/zjp-/p/9141955.html