mobile_基础事件

标签：事件绑定   ice   绑定   document   rev   用户   20px   mini   lse   

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

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

ontouchstart

手指按下事件

ontouchmove

手指移动事件

pntouchend

手指离开事件

DOM2 级事件模型（项目）

• 手指按下事件

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

• 手指移动事件

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

• TouchEvent

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

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

• 手指离开事件

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

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

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

e = e || window.event;

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. 点透处理

mobile_基础事件

标签：事件绑定   ice   绑定   document   rev   用户   20px   mini   lse   

原文地址：https://www.cnblogs.com/tianxiaxuange/p/10008677.html