M端再次遇到点透

可以看出zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的

再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的设计),所以在执行完tap事件之后,弹出来的选择组件马上就隐藏了,此时click事件还在延迟的300ms之中,当300ms到来的时候,click到的其实不是完成而是隐藏之后的下方的元素,如果正下方的元素绑定的有click事件此时便会触发,如果没有绑定click事件的话就当没click,但是正下方的是input输入框(或者select选择框或者单选复选框),点击默认聚焦而弹出输入键盘,也就出现了上面的点透现象。

3、点透的解决方法:

方案一:来得很直接github上有个fastclick可以完美解决https://github.com/ftlabs/fastclick

引入fastclick.js,因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上

1 window.addEventListener( "load", function() {
2     FastClick.attach( document.body );
3 }, false );

或者有zepto或者jqm的js里面加上

1 $(function() {
2     FastClick.attach(document.body);
3 });

当然require的话就这样:

1 var FastClick = require(‘fastclick‘);
2 FastClick.attach(document.body, options);

方案二:用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()

1 $("#cbFinish").on("touchend", function (event) {
2     //很多处理比如隐藏什么的
3     event.preventDefault();
4 });

方案三:延迟一定的时间(300ms+)来处理事件

1 $("#cbFinish").on("tap", function (event) {
2     setTimeout(function(){
3     //很多处理比如隐藏什么的
4     },320);
5 });    

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

理论上上面的方法可以完美的解决tap的点透问题,如果真的倔强到不行,用click

时间: 2024-08-11 19:29:38

M端再次遇到点透的相关文章

由移动端页面点击穿透想到的

原文链接 http://ymblog.net/2016/03/28/由移动端页面点击穿透想到的/ 首先我想到了哪些: 点击穿透是如何引起的 如何解决 什么是事件模拟 一.点击穿透是如何引起的? 可能是由click事件的延迟或者事件冒泡导致,事件包含touchstart/touchmove/touchend/mousedown/mousemove/mouseup/click. 造成点击穿透的原因是,在移动端页面中click的点击事件有200-300ms的延迟,为了体验更好我们使用了zepto的to

移动端二三事【二】:移动端触摸事件点透及多种解决方案。

大家都知道的少说,多分享一些干货. 一.首先说移动端的三大主要事件: 1.手指按下: ontouchstart2.手指移动:ontouchmove3.手指抬起 ontouchend *使用移动端事件时,为尽可能地保证兼容性与调试时的友好性,尽可能用事件绑定的方式.例如: /* 注意: 在移动端开发的时候,浏览器的模拟器时好时坏,一般不用on的方式绑定事件函数,要用事件绑定的方式(addEventListener). */ //用以下方式浏览器的移动端模拟器可能会无法识别事件 var div =

《网络协议》端到端与点到点通信

数据传输的可靠性是通过数据链路层和网络层的点对点和传输层的端对端保证的.端到端与点到点是针对网络中传输的两端设备间的关系而言的. 端到端通信 端到端通信是针对传输层来说的,它是一个网络连接,因为网络之间的通信必须要建立连接,实现应用程序之间的通信,不需要知道底层是如何传输的.实际上它是一条逻辑链路,这条逻辑链路可能经过了很复杂的物理路线. 端到端通信指的是在数据传输前,经过各种各样的交换设备,在两端设备间建立一条链路(在这两端之间不管有多少其他设备都忽略),就像它们是直接相连的一样,链路建立后,

javascript 在移动端鼠标事件点透问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

crc计算的大小端再次总结

a = 20b = 400s = struct.pack('>ii', a, b)print(s, type(s)) s = struct.pack('ii', a, b)print(s, type(s))s = struct.pack('<i', 170)print(s, type(s)) 执行结果:('\x00\x00\x00\x14\x00\x00\x01\x90', <type 'str'>)('\x14\x00\x00\x00\x90\x01\x00\x00', <

Google Colab遇到点bug

在Colab上发现如果使用挂载的方式运行代码 环境:python3 cuda版本10.1 那么子模块里的代码修改了也没起作用 比如我先是一个主模块,里面import了另一个submodule,然后我第一次运行的时候打印了我想要的结果,这时候我修改了submodule里的代码(随便print点什么), 发现无论怎么都跟第一次一样了,只能重新启动代码执行程序.不知道有没有跟我一样的情况,记下来分享一下~~ 原文地址:https://www.cnblogs.com/Zawo1995/p/1168475

移动端触摸事件

原生  ontouchstart  ontouchmove  ontouchend  obj.addEventListener('touchstart',start) obj.addEventListener('touchmove',move)  obj.addEventListener('touchend',end <a>点击我</a> <div>abc</div> div{position:absolute;left:0;top:0;background

移动端基础知识技巧总结

上个周周末,接手了一个移动端的(外包)小项目,一直着手于PC端,对移动端还是一知半解,所以这也是我的一个挑战,因此,今天心血来潮,总结一些移动端的基础知识和技巧供自己以后方便查阅,欢迎大家补充或转载: 一.单位(px,em,rem) 1.px:屏幕设备物理上能显示出的最小的一个点,不同设备上点的长宽,比例不一定相同: 2.em/rem:相同点:都是一个相对大小的值:不同点:em是相对父级元素,rem是相对html(默认值视浏览器而定,Chrome的默认为16px): rem单位在移动端前端开发很

【干货】移动端基础知识技巧总结

上个周周末,接手了一个移动端的(外包)小项目,一直着手于PC端,对移动端还是一知半解,所以这也是我的一个挑战,因此,今天心血来潮,总结一些移动端的基础知识和技巧供自己以后方便查阅,欢迎大家补充或转载: 一.单位(px,em,rem) 1.px:屏幕设备物理上能显示出的最小的一个点,不同设备上点的长宽,比例不一定相同: 2.em/rem:相同点:都是一个相对大小的值:不同点:em是相对父级元素,rem是相对html(默认值视浏览器而定,Chrome的默认为16px): rem单位在移动端前端开发很