移动端 细节点
*{
touch-action: none;//清除系统默认的手势事件
}
弹性布局 常用代码
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
flex-direction: column;
align-items: center;
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
user-scalable=no,
minimum-scale=1.0,
maximum-scale=1.0" />
device-width - 设备的宽度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: transparent;
-webkit-user-select:none;
点击穿透现象有三种? ?
*点击穿透问题:
点击蒙层(mask)上的关闭按钮,
蒙层消失后发现触发了按钮下面元素的click事件
蒙层关闭按钮绑定的是touch事件,
而按钮下边元素绑定的是click事件,
touch事件触发之后,蒙层消失了,300ms后这个点的click事件fire,
event的target自然就是按钮下面的元素,因为按钮跟蒙层一起消息了。? ?
*跨页面点击穿透事件:
如果按钮下面恰好是一个href属性的a标签,
那么页面就会法神跳转,因为a标签跳转默认是click事件触发,
所以原理和上面的完全相同? ?
*另一种跨页面点击穿透问题:
这次没有mask了,直接点击页内按钮跳转至新页,
然后发现新页面中对应位置元素的click事件被触发和蒙层的道理一样,
js控制页面跳转的逻辑如果是绑定在touch事件上的,
而且新页面中对应位置的元素绑定的是click事件,
而且页面在300ms内完成了跳转,三个条件同时满足,
就出现这种情况了
方案:
对于B元素本身没有默认click事件的情况(无a标签等),
应统一使用touch事件,统一代码风格,
并且由于click事件在移动端的延迟要大很多,
不利于用户体验,所以关于触摸事件应尽量使用touch相关事件。
click / tap
setTimeout mask
pointer-events:none;