本文主要是介绍tap“点透”,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
做移动端的开发,将单页应用的网页内嵌入了app:app应用点击响应慢!
click换成了tap事件,tap会出现点透现象。
可能导致的项目BUG
提示层一闪而过
我们可能会遇到这么一个场景:
表单提交页,用户提交时如果信息有误,会弹出一个提示,并且为蒙版添加click的关闭事件
但是有tap在的情况效果就不一样了,我们极有可能点击提交,弹出提示层,触发蒙版点击事件,蒙版关闭!!!
input获取焦点弹出键盘
我们可能遇到这种情况,我们在弹出层上做了一些操作后,点击弹出层关闭弹出层,但是下面有一个input(div有事件也行)
于是触发了div事件,于是input获取了焦点,某明奇妙的弹出来键盘!!!
解决思路
核心就是蒙版遮盖!
pointer-events属性
- auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。
- none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。
- 其它属性值为SVG专用,这里不再多介绍了。
这个家伙可以消除一个元素的鼠标事件,但是不会取消事件冒泡
这篇关于tap“点透”的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!