mobile_基础事件

DOM0 级事件模型（模拟器不支持）

DOM0 级事件绑定 在 移动端有 300ms 的延迟

ontouchstart

手指按下事件

 

ontouchmove

手指移动事件

 

pntouchend

手指离开事件

 

DOM2 级事件模型（项目）

• 手指按下事件

ele.addEventListener("touchstart", func1, false);

 

• 手指移动事件

ele.addEventListener("touchmove", func2, false);

• TouchEvent

手指列表：（都是 伪数组）

• changedTouches        目标元素 目标事件 上的手指列表0
  • e.changedTouches[0].clientX;
  • e.changedTouches[0].clientY;
• targetTouches         目标元素上的手指列表
• touches        屏幕上的手指列表

 

• 手指离开事件

ele.addEventListener("touchend", func3, false);

 

禁止浏览器默认行为（长按复制文本）

// 手机上你滑动的时候他自己就有个默认的滚屏

// 所以若是你要操做操做你个dom元素，用touchmove事件，这其实也是滑动

// 本来你的效果是要在dom上滑动而后产生相应的效果，这个时候你确定不但愿手机上的浏览器屏幕滚动

// 因此你应该把它默认的滚动给禁止了。这样才会有好的用户体验

document.addEventListener("touchstart", function(e){

e.preventDefault();        /* DOM2 清除默认行为 */

}, false);

 

准备工做

1. meta 标签（苹果发明的，PC 浏览器不支持）

<meta name="viewport" content="width=device-width",initial-scale=1.0, user-scalable=no />        完美视口

若是 页面存在一个太大的元素，只用了 width=device-width    initial-scale=1.0 的一个，一些浏览器会扩展布局视口的宽度来容纳此元素

若是 width=device-width    initial-scale=1.0 都写了，则大部分的浏览器不会改变布局视口

initial-scale    是系统初始缩放比例，随着 视觉视口 改变而改变。参照理想视口 375

user-scalable    是否容许用户进行缩放        默认容许

minimum-scale    容许缩放的最小比例        看公司规定    大多数 1

maximumscale    运算缩放的最大比例        看公司规定    大多数  1

target-desitydpi        基本不用，由于 webkit 内核不支持了

2. 清除默认样式

3. 清除系统滚动条

4. 取消默认行为

5. 适配

6. 点透处理