挪动端-点透的解决方法

挪动端经常涌现点透,至于怎样涌现的请人人去看一下zepto完成tap的源码。

1、“点透”是什么

你能够碰到过在列表页面上建立一个弹出层,弹出层有个封闭的按钮,你点了这个按钮封闭弹出层后后,这个按钮正下方的内容也会实行点击事宜(或翻开链接)。这个被定义为这是一个“点透”征象。

2.为何会涌现点透

zepto的tap经由过程兼听绑定在document上的touch事宜来完成tap事宜的模仿的,及tap事宜是冒泡到document上触发的

再点击完成时的tap事宜(touchstarttouchend)须要冒泡到document上才会触发,而在冒泡到document之前,用户手的打仗屏幕(touchstart)和脱离屏幕(touchend)是会触发click事宜的,由于click事宜有耽误触发(这就是为何挪动端不必click而用tap的缘由)(大概是300ms,为了完成safari的双击事宜的设想),
所以在实行完tap事宜以后,弹出来的挑选组件立时就隐蔽了,此时click事宜还在耽误的300ms当中,当300ms到来的时刻,click到的实在不是完成而是隐蔽以后的下方的元素,假如正下方的元素绑定的有click事宜此时便会触发,假如没有绑定click事宜的话就当没click,然则正下方的是input输入框(或许select挑选框或许单选复选框),点击默许聚焦而弹出输入键盘,也就涌现了上面的点透征象

3.点透的处置惩罚要领:

计划一:来得很直接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);

计划二:用touchend替代tap事宜并阻挠掉touchend的默许行动preventDefault()

 $("#cbFinish").on("touchend", function (event) {
   //许多处置惩罚比方隐蔽什么的
    event.preventDefault();
 });

计划三:耽误肯定的时候(300ms+)来处置惩罚事宜

 $("#cbFinish").on("tap", function (event) {
    setTimeout(function(){
    //许多处置惩罚比方隐蔽什么的
    },320);
 }); 

这类要领实在很好,能够和fadeInIn/fadeOut等动画连系运用,能够做出过分结果

理论上上面的要领能够圆满的处置惩罚tap的点透题目,假如真的倔强到不可,用click

    原文作者:木子喵
    原文地址: https://segmentfault.com/a/1190000013837902
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞