博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
WAP端 穿透问题和解决方法
阅读量:5927 次
发布时间:2019-06-19

本文共 2603 字,大约阅读时间需要 8 分钟。

1. 穿透问题可这么理解, 共有2种问题:

  问题1: 有A 和 B 两个弹层,B 弹层盖在A 弹层上面,B 弹层绑定 touchend 事件,当用户点击B 的时候 B隐藏,由于touchend 事件触发的太快了,导致用户点击到弹层下面的具有click 属性的元素的东东。(包括 A 标签<a href='#'></a> 或 input 框 或 绑定了 click 事件的元素)

  奇怪的是, 若给链接A 绑定了touchend 并且e.preventDefault() 也是不起作用。请看下面的例子,也就是它根本没有执行 touchend 事件,但是却执行了A 元素的 href 跳转链接。

浏览器表现 :

  ios 8.4 safari 页面不跳转
  ios 8.4 UC 10.6.5.627 跳转
  ios 7.0 safari 跳转
  ios 7.0 UC 10.6.5.627 跳转
  SAMSUNG GT-19308 4.3 UC 10.6.5.627 跳转
  SAMSUNG GT-19308 4.3 跳转。 若直接点击链接 a,竟然会跳转,e.preventDefault() 竟然没作用,只有这个浏览器会。想点击 a 链接不跳转,只能绑定 click 事件并且 e.preventDefault();

 

  问题2:有A 和 B两个元素,B 元素盖在A 元素上面,B元素默认隐藏。A元素绑定事件让B 元素显示出来,B元素点击自己隐藏。出现的现象是: 点击A元素 B元素显示不出,因为触发了B元素里的代码。

A.on('touchend', function(){  B.show();});// 就算B 元素用 touchend 绑定, 有的手机也还是会触发 B.hide();B.on('click', function(){  B.hide();});

 

解决穿透问题1: 

各个浏览器的表现

  iOS 8.4 safari用touchend 关闭 不会穿透下面绑定的 click 事件, 所以什么事都不用做,很完美。
  iOS 8.4 和 iOS 7.0 UC浏览器弹窗关闭用 setTimeout(function(){ 弹层.hide() }, 0); 可以解决弹层穿透。
  另外备注下: UC 浏览器做过优化,下面的代码 click 事件比 touchend的触发的快。

$('.m').on('touchend', function(){    setTimeout(function(){        console.log('touchend');    }, 0);});$('.m').click(function(){    console.log('click');});

iOS 7.0 safari的不行,只能用 e.preventDefault() 解决 或者设置 setTimeout(.. 360),而 e.preventDefault() 也支持 ios8.4 safari和UC版本的。

Android 的手机 4.1.1 JRO03L MIUI-JLB14.0, e.preventDefault();不能解决,但是 setTiemout 只要在 >=300 就可以解决了。

所以最终的解决办法:

  由于 iOS 7.0上 setTimeout 360毫秒 的时间太长了,所以直接给 B弹层绑定 e.preventDefault();

B.on('touchend', function(e){    e.preventDefault();    B.hide();});

   Android上解决方式通过属性 pointer-events: none; 让整个页面都不能有点击的属性, 301秒以后恢复属性值。

B.on('touchend', function(){    $('html').css({        pointer-events: 'none'    });    setTimeout(function(){        $('html').css({            pointer-events: 'auto'        });    }, 301);    B.hide();});

 

解决穿透问题2:

  解决方式比较简单, A 里面用 e.preventDefault(), 注意A也不能绑定tap; B 绑定 touchend

A.on('touchend', function(e){    e.preventDefault();    B.show();});B.on('touchend', function(){    B.hide();});

 

2. 当给一个元素绑定 touchend 事件和click事件, touchend事件让元素关闭,那么都不会触发到 click 事件,浏览器如下。

  SAMSUNG GT-19308 4.3 原生浏览器 和 UC浏览器 10.6.5.627
  IOS7.0 safari 和 UC浏览器 10.6.5.627
  IOS8.4 safari 和 UC浏览器 10.6.5.627

 

3. fastClick

通过绑定 body touchend,然后通过逻辑找到 e.target 元素,满足条件下执行 e.preventDefault(); 阻止了 click事件,然后让 initMouseEvent 和 dispatchEvent 来触发。

问题1的是否解决 的浏览器兼容如下:

SAMSUNG GT-19308 4.3 和 ios8.4

  原生浏览器和safari 可以
  UC浏览器都 可以

ios7.0 safri 和 UC浏览器 都不可以

 

4. 注意:若给 html 根元素绑定了

$('html').on('touchend', function(){ e.preventDefault(); })
则页面里所有的元素 click 绑定的事件都触发不了, input 都不能点击输入了。

转载于:https://www.cnblogs.com/zhengming2016/p/5567471.html

你可能感兴趣的文章
思科IOS软件命名规则
查看>>
Windows Update的自动更新被关闭了,并且更改按钮是灰色无法更改设置
查看>>
Debian kali2 操作系统Segmentation fault
查看>>
oracle中Where子句顺序是否对SQL性能有影响
查看>>
开源邮件服务器
查看>>
# 180111php编译错误
查看>>
Char类型
查看>>
EIGRP 查看邻居命令详解
查看>>
我的友情链接
查看>>
OSX 10.11上,全局安装electron的问题
查看>>
SxsTrace使用教程(追踪软件运行的详细过程)
查看>>
mysql备份与恢复+ERROR 1046
查看>>
jenkins------部署项目到jboss eap下
查看>>
配置cacti邮件报警,postfix与sendmail冲突
查看>>
如何获取Windows XP完全内存转储文件
查看>>
js闭包
查看>>
FAQ系列 | utf8表存储latin1乱码字符转换
查看>>
深入PHP面向对象、模式与实践
查看>>
Centos中简单配置perl中的CPAN
查看>>
Linux启动流程
查看>>