随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在 PC 浏览器上用的鼠标事件,比如:click, mouseover 等,已经无法满足移动设备触摸屏的特点。
## 1、click 事件的 200~300ms 延迟问题
由于移动端默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari 最新引入了双击缩放功能:用户双击手机页面的时候,浏览器会智能的缩放当前页面到原始大小。
为了达到缩放功能,系统做了一个处理,当触摸一次后,在 300ms 这段时间内有没有触摸第二次,如果触摸了第二次的话,说明是触发放大或缩放功能,否则的话是 click 事件。因此当 click 时候,所有用户必须等待于 300ms 后才会触发 click 事件。
由于双击缩放功能存在,click事件触发就会有大约200~300ms的延迟。
## 2、dblclick 事件失效
由于双击缩放的存在,PC 端的 dblclick 事件也失效了。
- 第一章:移动开发入门
- 第一节:概述
- 第二节:基础概念
- 第一课时:像素
- 第二课时:视口
- 第二章:Flex 布局
- 第一节:概述
- 第二节:容器属性
- 第一课时:flex-direction 属性
- 第二课时:flex-wrap 属性
- 第三课时:flex-flow 属性
- 第四课时:justify-content 属性
- 第五课时:align-items 属性
- 第六课时:align-content 属性
- 第三节:项目属性
- 第一课时:order 属性
- 第二课时:flex-grow 属性
- 第三课时:flex-shrink 属性
- 第四课时:flex-basis 属性
- 第五课时:flex 属性
- 第六课时:align-self 属性
- 第四节:Flex 实例
- 第一课时:常见页面布局
- 第三章:响应式布局
- 第一节:概述
- 第二节:媒体查询
- 第一课时:概述
- 第二课时:响应式设计
- 第三节:栅格系统
- 第一课时:概述
- 第二课时:案例分析
- 第三课时:Bootstrap 简介
- 第四节:响应式案例
- 第一课时:三星首页
- 第四章:移动端适配
- 第五章:移动端事件
- 第一节:概述
- 第二节:touch 事件
- 第三节:触摸事件对象
- 第四节:其他事件
- 第五节:移动端幻灯片
- 第六章:移动端常见问题
- 第一节:浏览器兼容性
- 第二节:移动端动画
- 第三节:300ms 延迟
- 第四节:文字溢出省略
- 第五节:水平居中和垂直居中
- 第七章:项目案例
- 第一节:美团外卖
- 第一课时:首页
- 第二课时:订单页面
- 第三课时:我的页面
- 第四课时:详情页面
- 第五课时:购物车页