在移动端，单击穿透是什么？

单击穿透现象有3种。

单击穿透问题：单击蒙层（mask）上的“关闭”按钮，蒙层消失后，发现触发了按钮下面元素的 click事件。
页面单击穿透问题：如果按钮下面恰妤是一个有href属性的a标签，那么页面就会发生跳转。
跨页面单击穿透问题：这次没有蒙层了，直接单击页内按钮跳转至新页，然后发现新页面中对应位置元素的 click事件被触发了。

有4种解决方案。

（1）只用 touch。

这是最简单的解决方案，完美解决单击穿透问题，把页面内所有 click都换成 touch事件（ touchstart、 touched、tap）。

（2）只用 click

因为单击会带来300ms的延迟，所以页面内任何一个自定义交互都将增加300ms的延迟。

（3）轻触〔tap）后延迟350ms再隐藏蒙层。

改动最小，缺点是隐藏蒙层变慢了，350ms还是能感觉到慢的。

（4）添加 pointer-events:none样式。

这比较麻烦且有缺陷，不建议使用。蒙层隐藏后，给按钮下面的元素添上pointer-events:none样式，让 click穿过去，350ms后去掉这个样式。恢复响应的缺陷是蒙层消失后的350ms内，用户单击按钮下面的元素没反应，如果用户单击速度很快，一定会发现。

在移动端，单击穿透是什么？相关推荐

移动端滚动穿透问题完美解决方案
移动端滚动穿透问题完美解决方案参考文章: (1)移动端滚动穿透问题完美解决方案 (2)https://www.cnblogs.com/yaiza/p/11384130.html 备忘一下.
关于移动端滚动穿透问题的解决
关于移动端滚动穿透问题的解决移动端滚动穿透问题:在移动端进行fixed弹窗的时候,在弹窗上滑动会导致下层页面跟着滚动,影响用户体验,这种现象称为'滚动穿透'. 三种解决办法中,视需求选择解决办法: ...
移动端滚动穿透的6种解决方案
移动端滚动穿透的6种解决方案参考文章: (1)移动端滚动穿透的6种解决方案 (2)https://www.cnblogs.com/bigkuan/p/11977674.html 备忘一下.
利用空闲服务器搭建frps服务端-实现穿透代理
利用frps代理Tcp或者udp或其它类型的连接 1.什么是frps/frpc frps是代理的服务端.frpc是代理的客户端,使用方数据传输到服务端,服务端再将数据传输到提供方,从而达到相互访问的目 ...
单页应用移动端弹窗穿透解决终极方案
移动端的web项目,大多数会采用单页应用来实现,在布局上也有一定的讲究,从设计角度出发的话,布局大致分为两类,一类是单页全屏,另外一种是内容多的滚动屏.全屏的话,一般布局会采用vh,position等 ...
移动端滚动穿透与滚动溢出解决方案
滚动穿透滚动穿透.gif 问题描述在移动端 WEB 开发的时候(小程序也雷同),如上录屏所示,如果页面超过一屏高度出现滚动条时,在 fixed 定位的弹窗遮罩层上进行滑动,它下面的内容也会跟着一起 ...
移动端单击图片放大缩小
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
前端面试题～移动端注意
1.在移动端,单击穿透是什么? 单击穿透现象有3种. 单击穿透问题:单击蒙层(mask)上的"关闭"按钮,蒙层消失后,发现触发了按钮下面元素的 click事件. 页面单击穿透问题: ...
【前端面试题】—21道有关移动端的面试题
前端发展到今天,移动端的流量已经超越了PC端.比如对绝大部分人来说,每天使用手机上网的时间要远高于使用笔记本电脑.计算机的上网时间.因此移动端变得越来越重要.每个人的手机屏幕大小不同.系统不同,因此移 ...
【前端面试题】—21道有关移动端的面试题(附答案)
前端发展到今天,移动端的流量已经超越了PC端.比如对绝大部分人来说,每天使用手机上网的时间要远高于使用笔记本电脑.计算机的上网时间.因此移动端变得越来越重要.每个人的手机屏幕大小不同.系统不同,因此移 ...

在移动端，单击穿透是什么？

在移动端，单击穿透是什么？相关推荐

最新文章

热门文章