在移动端,网页上的点击穿透问题导致了非常糟糕的用户体验。那么该如何解决这个问题呢?

问题产生的原因

移动端浏览器的点击事件存在300ms的延迟执行,这个延迟是由于移动端需要通过在这个时间段用户是否两次触摸屏幕而触发放大屏幕的功能。那么由于click事件将延迟300ms的存在,开发者在页面上做一些交互的时候往往会导致点击穿透问题(可以能是层之间的,也可以是页面之间的)。

解决问题

之前遇到这个问题的时候,有在网上看了一些关于解决移动端点击穿透的问题,也跟着网上提出的方式进行了各项测试,最终还是觉得使用fastclick插件比较靠谱些,其他几种方法多多少少会存在一些其他问题(当然,fastclick也不是说完全兼容各项,但相对于其他一些方法不会造成较明显的问题)

使用方式:

<!-- 引入文件 --><script src="fastclick.js"></script>

js:

Android培训,安卓培训,手机开发培训,移动开发培训,云培训培训

// fastclick 使用/*
   @params layer  需要处理click事件的视图
   @params options 一些配置 
     { 
       touchBoundary: 10  // 点击事件边界线
       tapDelay: 200      // tap最小延时
       tapTimeout: 700    // tap最大延时
     }*/FastClick.attach(layer,options)// 一般使用FastClick.attach(document.body)

延伸阅读

学习是年轻人改变自己的最好方式-Java培训,做最负责任的教育,学习改变命运,软件学习,再就业,大学生如何就业,帮大学生找到好工作,lphotoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训学习是年轻人改变自己的最好方式