解决移动端点击穿透问题_h5实现移动端点击事件穿透的多种解决方案

时间: 2018-04-23阅读: 4412标签: 移动端

移动端点透点透现象出现的场景:

当A/B两个层上下z轴重叠,上层的A点击后消失或移开(这一点很重要),并且B元素本身有默认click事件(如a标签)或绑定了click事件。在这种情况下,点击A/B重叠的部分,就会出现点透的现象。

点透现象出现的原因:

zepto的tap事件是通过兼听绑定在document上的touch事件来完成tap事件的模拟的,并且tap事件是冒泡到document上触发的!!!在移动端不使用click而用touch事件代替触摸是因为click事件有着明显的延迟,具体touchstart与click的区别如下:
touchstart:在这个DOM(或冒泡到这个DOM)上手指触摸开始即能立即触发;
click:在这个DOM(或冒泡到这个DOM)上手指触摸开始,且手指未曾在屏幕上移动(某些<a href=”http://”>浏览器</a>允许移动一个非常小的位移值),且在这个DOM上手指离开屏幕,且触摸和离开屏幕之间的间隔时间较短(某些浏览器不检测间隔时间,也会触发click)才能触发

也就是说,在移动端事件的触发时间按由早到晚排列为:touchstart 早于 touchend 早于 click。亦即click的触发是有延迟的,这个时间大概在300ms左右。由于我们在touchstart阶段就已经隐藏了罩层A,当click被触发时候,能够被点击的元素则是其下的B元素,根据click事件的触发规则:只有在被触发时,当前有click事件的元素显示,且在面朝用户的最前端时,才触发click事件。由于B绑定了click事件(或者B本身默认存在click事件),所以B的click事件被触发,产生了点透的情况。

点透现象解决方案:

解决方案一:来得很直接github上有个fastclick可以完美解决
引入fastclick.js,因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );


或者有zepto或者jqm的js里面加上
$(function() {
FastClick.attach(document.body);
});


当然require的话就这样:
var FastClick = require(‘fastclick‘);
FastClick.attach(document.body, options);


解决方案二:对于B元素本身存在默认click事件的情况,应及用touchend代替tap事件并阻止掉时A元素touchend的默认行为preventDefault(),从而阻止click事件的产生。
$("#aa").on("touchend", function (event) {
//很多处理比如隐藏什么的
event.preventDefault();
});
对于B元素本身没有默认click事件的情况(无a标签等),应统一使用touch事件,统一代码风格,并且由于click事件在移动端的延迟要大很多,不利于用户体验,所以关于触摸事件应尽量使用touch相关事件。

解决方案三:延迟一定的时间(300ms+)来处理事件
$("#aa").on("tap", function (event) {
setTimeout(function(){
//很多处理比如隐藏什么的
},320);
});


这种方法其实很好,可以和fadeInIn/fadeOut等动画结合使用,可以做出过度效果

解决方案四: 理论上上面的方法可以完美的解决tap的点透问题,如果真的倔强到不行,改用click。特别是对于遮盖浮层,由于遮盖浮层的点击即使有小延迟也是没有关系的,反而会有疑似更好的用户体验,所以这种情况,可以针对遮盖浮层自己采用click事件,这样就不会出现点透问题。 作者-豆豆蛙。


移动端缩放解决方案 hammerjs

本方案适合各种前端成熟框架,以 ionic3为例子,第一步 安装 hammerjs:npm install hammerjs;第二步 写核心缩放功能

移动端实现表头固定,tbody滚动的三种方法

实现表头固定,tbody垂直滚动。准备工作:获取页面可是区域高度。方法一:两个table,第一个table放表头,第二个table方内容,通过JS实现监听滚动事件,动态控制表头位置

移动端数字键盘遇到的知识点

ios 点击事件会出现闪屏效果,解决方法。click事件的300ms延迟响应,touch会有穿透效果。js判断小数点的位数

vconsole_移动端h5开启控制台的实现

开发内嵌在 web,可能会遇到意想不到的 bug,所以你需要你能在手机上查看的控制台。前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼容不好,所以最近使用了vConsole 进行调试。

移动端H5开发遇到的坑

微信分享签名错误invalid signature,往返缓存问题,IOS端不支持new Date(\"2019-01-01 00:00:00\") 这种格式,微信二维码,IOS中无法点击,audio音频无法播放,fixed问题

移动端 滚动隐藏浏览器地址栏和工具栏

文章中实现原理其实很简单,强制页面高度超过手机屏幕高度,手动滚动时会隐藏浏览器自带地址栏和工具栏(qq浏览器不会隐藏工具栏).原理:js模拟用户滚动,scrollTo.

移动端H5页面阻止图片和文字被选中

阻止span标签等文字被选中;阻止浏览器点击图片查看的行为(常见于uc浏览器)1.背景图的方式插入(这种是比较普遍的方式),2.使用js事件阻止默认行为的方法

rem.js的用法及在浏览器端的适配

更新换代快的大前提下自然又涌现出了适配问题,主流解决方案有很多,如响应式布局、cover布局、container布局 这几种布局在大多数情况下不限制高度的页面下还是相当有用的

移动端尺寸基础知识

初涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白,感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起,理清关于尺寸的所有细节

解决移动端禁止双指缩放功能

在实际开发中,我们禁止缩放的实现方式meta设置,user-scalabel=no或者user-scalabel=yes(yes是可以缩放,no或者0是不能缩放),在ios10以上的系统中,并不支持meta标签,需要我们通过脚本实现

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全