width:视口的宽度,width=device-width:宽度是设备的宽度 initial" name="description" /> width:视口的宽度,width=device-width:宽度是设备的宽度 initial" />

移动端事件

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("动画结束")
   })

 

文章来源: 移动端事件

人吐槽 人点赞

猜你喜欢

发表评论

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:移动端事件