mobile_基础事件

Posted 2021-01-22 tianxiaxuange

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