# 移动端点击穿透问题

移动端点击穿透问题

点击遮罩层(mask,也叫蒙层)上的关闭按钮，蒙层消失后发现触发了按钮下main元素的click事件

原因：主要是touch和click同时存在，touch之后又触发了click

解决方案：

1.只用touch

既然是由于touch之后的click造成的，那么不用click自然解决了这个问题

需要注意a标签的href也是click,需要换成JavaScript:void（0）

2.只用click

下下策，因为300ms延迟，如果交互性要求不高可以这么做，但快一点总归是好的

3.拿个东西来挡住

比较笨的办法，不推荐用

4.tap延迟350ms再隐藏mask

改动最小，缺点是隐藏mask变慢了

5.pointer-eventer

有缺陷，不建议使用

原文地址：https://www.cnblogs.com/ltfxy/p/12550196.html

时间： 2024-10-27 08:15:45

# 移动端点击穿透问题的相关文章

Zepto tap 穿透bug、解决移动端点击穿透问题

当两个层重叠在一起时,或是有个弹窗,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件,特别是底层如果是input框时,必"穿 透", 现象原因: zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的 再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用 户手的接触屏幕(touchstart)和离开屏幕

移动端300ms点击延迟和点击穿透问题

一.移动端300ms点击延迟 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果.在移动WEB兴起的初期,用户对300ms的延迟感觉不明显.但是,随着用户对交互体验的要求越来越高,现今,移动端300ms的点击延迟逐渐变得明显而无法忍受. 那么,移动端300ms的点击延迟是怎么来的呢? 问题由来 这要追溯至 2007 年初.苹果公司在发布首款 iPho

点击穿透原理及解决

一.事件触发顺序 PC网页上的大部分操作都是用鼠标的,即响应的是鼠标事件,包括mousedown.mouseup.mousemove和click事件.一次点击行为,可被拆解成:mousedown -> mouseup -> click 三步. 手机上没有鼠标,所以就用触摸事件去实现类似的功能.touch事件包含touchstart.touchmove.touchend,注意手机上并没有tap事件.手指触发触摸事件的过程为:touchstart -> touchmove -> tou

UGUI 点击穿透问题

unity上 用 做游戏欢迎界面上通用的ui,然后导到游戏里面直接用,但发现游戏里面是用ngui的,点击ugui 的ui 会穿透过去 ngui会响应,原本模型的点击处理也会响应 我用的 unity 版本 是 4.6.3的 本来是用   EventSystem.current.IsPointerOverGameObject()   来检测点击穿透的 在pc的unity编辑器上都可以检测到.可是打包到android 上 就无效,网上有的说以前的版本可以,不知道是不是之后的bug,还是有其他的接口 在

点击穿透问题（http://www.tuicool.com/articles/6NfaUnM）

一.click与300ms延迟 移动浏览器提供一个特殊的功能:双击(double tap)放大 300ms的延迟就来自这里,用户碰触页面之后,需要等待一段时间来判断是不是双击(double tap)动作,而不是立即响应单击(click),等待的这段时间大约是300ms.之前有过简单介绍: 黯羽轻扬:HTML5触摸事件 移动事件提供了 touchstart . touchmove . touchend 却没有提供tap支持,主流框架(库)都是手动实现了自定义tap事件,以求消除300ms延迟,提高

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

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

[Phonegap+Sencha Touch] 移动开发23 Android和IOS的webview点击穿透的缓解办法

安卓的webview和自带浏览器下有个奇怪的现象. 现象: 1.如果输入框input或者textarea的正上方(z轴方向,即上层)有个div,当点击这个div使得div隐藏了之后,input会得到焦点,导致软键盘弹出. 2.浏览视图点击某个地方切换到编辑视图,如果浏览视图点击的位置 在 编辑视图相应位置有个输入框,那么切换过去之后,编辑页的输入框会自动得到焦点. 这个体验很不舒服. 讨论: 这个不是点击事件的事件冒泡导致的(因为e.stopPropagation()和return false是

移动页面的点击穿透问题

点击穿透现象有3种: 点击穿透问题:点击蒙层(mask)上的关闭按钮,蒙层消失后发现触发了按钮下面元素的click事件 蒙层的关闭按钮绑定的是touch事件,而按钮下面元素绑定的是click事件,touch事件触发之后,蒙层消失了,300ms后这个点的click事件fire,event的target自然就是按钮下面的元素,因为按钮跟蒙层一起消失了 跨页面点击穿透问题:如果按钮下面恰好是一个有href属性的a标签,那么页面就会发生跳转 因为 a标签跳转默认是click事件触发 ,所以原理和上面的完

移动页面点击穿透问题解决方案

移动页面点击穿透问题解决方案 时间 2015-08-24 21:43:58  黯羽轻扬 原文  http://www.ayqy.net/blog/移动页面点击穿透问题解决方案/ 主题 JavaScript 一.click与300ms延迟 移动浏览器提供一个特殊的功能:双击(double tap)放大 300ms的延迟就来自这里,用户碰触页面之后,需要等待一段时间来判断是不是双击(double tap)动作,而不是立即响应单击(click),等待的这段时间大约是300ms.之前有过简单介绍: 黯羽