点击穿透是指在某些场景下,⽤户在快速点击⻚⾯元素时,由于某些原因(例如⽹络延迟),
在前⼀个元素上的点击事件还没有完成时,下⼀个元素的点击事件就已经触发了,导致⽤户感
觉到⻚⾯点击⽆效或者出现异常。
解决点击穿透的⽅法有以下⼏种:
- 使⽤ debounce 或 throttle 函数。 这两种函数可以控制函数的执⾏频率,减少短时间内函
数的执⾏次数,从⽽减少点击穿透的可能性。 - 使⽤ CSS pointer-events 属性。将当前元素的 pointer-events 属性设为 none,可以禁⽤
当前元素的⿏标事件,从⽽避免在事件处理函数执⾏过程中发⽣点击穿透。 - 使⽤ touch 事件代替 click 事件。 在移动设备上,click 事件有300ms的延迟,可能会导致
点击穿透。使⽤ touchstart、touchend 等 touch 事件可以避免这个问题。 - 在 click 事件中使⽤ preventDefault 函数。在 click 事件的处理函数中调⽤ preventDefault
函数,可以阻⽌默认的事件⾏为,从⽽避免点击穿透。但是这种⽅法有可能会影响到⼀些
⽤户习惯,因此需要慎⽤。