we移动端

1)touch事件: touch,触摸,  是移动端的触摸事件,是一组事件
  1. touchstart: 当手指触摸到屏幕的时候触发的-------只会触发一次
  2. touchmove: 当手指在屏幕中滑动时触发 ---------一直触发
  3. touchend:  当手指离开屏幕时触发--------只会触发一次
  4. touchcancel:  被迫中止滑动时触发-----当来电  弹出消息

2)移动端添加事件的方式: addeventlistener(事件类型,function(){},false)
3) 事件参数对象e:  名字: touchList(触摸点集合,一个手指就是一个触摸点,和屏幕接触的点的个数)
      1. changedTouches: 改变后的触摸点的集合
      2. targetTouches: 当前元素的触发点集合
      3. touches: 页面中所有的触发点的集合
4) 每一个事件都可以记录触摸点,特例:touchend事件:targetTouches和touches不会被记录

5) clientX,clientY: 基于浏览器窗口(视口)
   pageX,pageY: 基于页面(视口)
   screenX,screenY: 基于屏幕
   ------滑动,滑动实现的原理: 让触摸的元素随着手指的滑动做位置的改变
1. 移动端的点击事件: click事件,一般不用,因为移动端为了滑动还是点击,click事件会延迟300ms,
     这样会影响用户体验,响应太慢了。
 2. 解决方案:
   1) 使用tap事件,  tap:轻击
       1.1 说明:tap事件不是移动端的原生事件,而是通过touch事件衍生过来的
       1.2 zepto.js:轻量级的jquery库,里面封装了tap事件
       1.2 tap事件的条件:  1. 响应速度要比click快   响应速度小于150ms----在谷歌浏览器中模拟看不到300ms的效果(只能看到执行顺序), 在真机上才能看到延时效果
                      2. 不能滑动(不能触发touchmove事件)

   2)   使用fastclick.js  提高了移动端click响应速度
         fastclick.js : 一个插件, 先下载,
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值