2

前段时间做项目中发现了点透现象,所以上网找了些资料,纪录一下。

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);

zhouzhou
1.5k 声望76 粉丝

web前端


引用和评论

0 条评论