前端常见的坑

click点击事件延时300ms、穿透

表现

• 监听元素 click 事件，点击元素触发时间延迟约 300ms。
• 点击蒙层，蒙层消失后，下层元素点击触发。

为什么会产生 click 延时？

• 点击后300ms如果没有继续点击就是单击，如果有点击就是双击
• Safari会有双击缩放，APP中单机都会产生300ms的延迟

为什么会产生 click 点击穿透？

• 双层元素叠加时，
• 在上层元素上绑定 touch事件，下层元素绑定click 事件。
• 由于click发生在touch之后，点击上层元素，元素消失，
• 下层元素会触发 click 事件，由此产生了点击穿透的效果。

解决方法

1. 使用 touchstart 替换 click – > 导致点击穿透
   同时需要点击和滑动的情况不建议使用，因为会有冲突
   所以，在具有滚动的情况下，还是建议使用 click 处理
   或者保证点击的元素不在滚动的父元素之下

2. 使用fastclick库
   fastclick原理：
   在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟
   一个click事件，并把浏览器在300ms之后真正的click事件阻止掉

参考：https://mp.weixin.qq.com/s/CVwXr3jEfnuv42Z92Y8tKg

iOS内嵌h5页面出现滚动卡白，渲染不及时

原因：

• -webkit-overflow-scrolling / overflow-scrolling 大量使用
• el-table的使用 – js动态懒加载页面，性能损耗大

两者都造成性能消耗比较大

小程序里value值不及时渲染

循环列表里改值，大于2时赋值2，由于多次输入大于2，value值实际是2，（虽然表面显示的不是2），导致2==2不渲染