当前位置: 首页 > Web前端 > HTML5

移动端点击问题巧妙解决了移动端经常出现

时间:2023-04-05 14:22:23 HTML5

的问题,具体是怎么出现的,请看zepto源码实现点击。1.什么是“点进”?您可能遇到过在列表页创建弹出层的情况。弹出层有一个关闭按钮。单击该按钮关闭弹出层后,该按钮正下方的内容也将被执行。单击事件(或打开链接)。这被定义为“点穿”现象。2、为什么zepto的tap是通过监听document绑定的touch事件来完成tap事件的模拟,tap事件是通过冒泡到document中触发的,完成后点击tap事件(touchstarttouchend)需要冒泡到文档触发,在冒泡到文档之前,用户的手触摸屏幕(touchstart)和离开屏幕(touchend)都会触发点击事件,因为点击事件有延迟触发(这是为什么移动端不用click而是tap的原因)(300ms左右,为了实现safari的双击事件的设计),所以tap事件执行后,弹出选择组件立马隐藏,而点击事件还是有延迟的。300ms期间,当300ms到的时候,点击没有完成,而是下面的隐藏元素。如果正下方的元素绑定了点击事件,此时就会触发。如果没有绑定click事件,会在没有click,但是input输入框(或者select选择框或者radio复选框)在正下方的时候,点击默认焦点,会弹出输入键盘,并且会出现上面的点透现象。3、点通的解决方法:解决方法一:非常直接来github上有个fastclick可以完美解决引入fastclick.js的问题,因为fastclick的源码不依赖其他库,所以可以加上window.addEventListener("load",function(){原生js前直接FastClick.attach(document.body);},false);或使用zepto或jqm添加$(function(){FastClick.attach(document.body);})到js;当然,如果require是这样的:varFastClick=require('fastclick');FastClick.attach(document.body,options);方案二:用touchend代替tap事件,防止touchend的默认行为过错();});解决方案三:延迟一定时间(300ms+)处理事件$("#cbFinish").on("tap",function(event){setTimeout(function(){//很多处理比如Whattohide},320);});这个方法其实很好,可以和fadeInIn/fadeOut等动画结合使用,可以做出过度的效果。理论上,上述方法可以完美解决丝锥穿透问题。固执太差,用click