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 : 一个插件, 先下载,