点透bug

问题描述:在上层元素添加的是tap事件,并且是tap之后消失,下层元素添加的的是click,这个时候
    
    在上层元素tap消失后,会触发下层元素click事件

解决方式:

1.上下两层都使用tap事件,不要使用click事件  缺点:a标签自带的就是click

2.缓动动画 让上层的元素不要一下子消失,以动画的方式去消失,只要时间够了300ms,就ok了

缺点:跟设计的效果不符合

3.中间层过渡   中间再放一个透明的层,然后给它加click事件,click之后消失

缺点:有很小的几率,中间层没有消失,   凭空就需要多操作一个dom

4.使用fastclick库   缺点:多了很多代码

时间: 2024-11-08 23:05:42

点透bug的相关文章

手机那点事!已有高人把常见的不常见的坑都给找出来了,我就随便转一下了

mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 工具类网站 HTML5 与 CSS3 技术应用评估 各种奇妙的hack 几乎所有设备的屏幕尺寸与像素密度表 移动设备参数表 ios端移动设备参数速查 浏览器兼容表 移动设备查询器 移动设备适配库 移动设备适配库2 viewport与设备尺寸在线检测器 html5 移动端兼容性速查 在线转换字体 c

[移动端]移动端上遇到的各种坑与相对解决方案

mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案 1.问题:手机端 click 事件会有大约 300ms 的延迟 原因:手机端事件 touchstart –> touchmove –> touchend or touchcancel –> click,因为在touch事件触发之后,浏览器要判断用户是否会做出双击屏幕的操作,所以会等待300ms来判断,再做出是否触发click事件的处理,所以就会有300ms的延迟 解决方法:使用touch事件来代替click事件,如

(任寒韬)WebApp群主 - MobileTech 资料

web app : http://www.lightapp.cn/brand/index/4101 https://github.com/jtyjty99999/mobileTech/blob/master/README.md mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 工具类网站 HTML5 与 CSS3 技术应用评估 各种奇妙的hack

[移动端]移动端上遇到的各种坑与相对解决方式

mobileHack 这里收集了很多移动端上遇到的各种坑与相对解决方式 1.问题:手机端 click 事件会有大约 300ms 的延迟 原因:手机端事件 touchstart –> touchmove –> touchend or touchcancel –> click.由于在touch事件触发之后,浏览器要推断用户是否会做出双击屏幕的操作,所以会等待300ms来推断,再做出是否触发click事件的处理.所以就会有300ms的延迟 解决方法:使用touch事件来取代click事件.如

做webApp遇到的一些坑及解决方案

1.问题:手机端click事件会有大约300ms的延迟 原因:手机端事件touchstart-->touchmove-->touchend or touchcancel-->click,因为在touch事件触发之后,浏览器要判断用户是否会做出双击屏幕的操作,所以会等待300ms来判断,再做出是否触发click事件的处理,所以就会有300ms的延迟 解决方法:使用touch事件来代替click事件,如zepto.js的tap事件和fastClick来解决. 2.问题:在部分机型下(如小米4

移动web终端交互优化

在移动设备上没有了鼠标输入,hover等一些鼠标事件不再生效,取而代之的是触摸事件touch 移动web页面上的click事件响应都要慢300ms 300ms延迟怎么破? 使用Tap事件代替click事件 Tap事件一般引用移动框架库Zepto.js tap点透bug:若一个btn上面有个遮罩的话,当点击遮罩时不仅会促发遮罩上的点击事件也会触发btn上的点击事件 click事件和tap事件触发过程 touch事件: 触摸才是移动设备交互的核心事件 touchstart:手指触摸屏幕触发(已经有手

移动技术资源

mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 工具类网站 HTML5 与 CSS3 技术应用评估 各种奇妙的hack 几乎所有设备的屏幕尺寸与像素密度表 移动设备参数表 ios端移动设备参数速查 浏览器兼容表 移动设备查询器 移动设备适配库 移动设备适配库2 viewport与设备尺寸在线检测器 html5 移动端兼容性速查 在线转换字体 c

移动端优化

地址:http://www.imooc.com/video/9578 一.300ms 移动web页面上的click事件响应都要慢上300ms 解决办法: 第一种,使用Tap事件代替click事件 例子: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" c

备:移动端开发资源和小技巧

(在github上看到的,转摘而来,如果有版权问题请联系我[email protected]) mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 移动端统计 (from BiosSun) 可基于下方所列出的统计数据来决定您要兼容的设备及浏览器. 百度移动统计 友盟指数 CNZZ 桌面及移动端浏览器统计 全球移动端浏览器统计 工具类网站 HTML5