前段时间做项目中发现了点透现象,所以上网找了些资料,纪录一下。
touch事件
touch是针对触屏手机上的触摸事件。
其中包括:touchstart,touchmove,touchend,touchcancel
- touchstart: 当手指触摸到屏幕会触发
- touchmove: 当手指在屏幕上移动时,会触发
- touchend: 当手指离开屏幕时,会触发
click
在手机WEB端,click会有 200~300 ms的延迟
在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend --》click
点透
点透现象出现的场景
当A/B两个层上下z轴重叠,上层的A点击后消失或移开,并且B元素本身有默认click事件或绑定了click事件。在这种情况下,点击A/B重叠的部分,就会出现点透的现象。
解决方案
引入fastclick.js
阻止默认事件
event.preventDefault();
延迟click事件
setTimeout(function(){
//......
},320);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。