移动端事件

2018-06-22 05:40:17来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:烦人的运营后台导出大批量数据

下一篇:php向页面输出中文时出现乱码的解决方法