iOS:active或-webkit-tap-highlight无效的原因及解决方案

通常，元素在按压态/点击态时会使用 :active伪类 来设置特定的样式，这个操作在pc/Android上都没有问题，但 iOS上的点击事件（click）是模拟出来的，在iOS上使用 :active 伪类 需要设置一个touch事件，这样元素的:active伪类才能被正确触发。一般是给body标签上加一个ontouchstart属性，但是但是~注意body的渲染范围，要保证元素上的touch事件能冒到body上才行。

除了:active伪类外，还有一条css属性更适合做“点元素时元素上面覆盖一层遮罩颜色”的效果：-webkit-tap-highlight，此属性非标准，只有WebKit/Safari, Blink/Chrome和某些版本的IE、Edge可以用。

可是有时候，-webkit-tap-highlight在iOS上并不能像预期一样工作，这就和Safari on iOS上“clickable 元素”的概念分不开了。

在iOS，当用户tap一个clickable的元素时，事件会按mouseover → mousemove → mousedown → mouseup → click的顺序到达，然后用户tap另一个clickable元素的时候才触发这个元素的mouseout事件；而当用于tap一个nonclickable元素的时候，啥事件都不会发生，如图所示：

因此，给一个被识别成了nonclickable的元素设置-webkit-tap-highlight-color属性是没用的。

不过可以给nonclickable的元素加一些响应用户操作的事件/css属性，让它被识别成clickable元素，例如：

• cursor: pointer;
• οnclick=“void(0)”

还可以用一些天生自带clickable的标签换掉nonclickable(主要是 div)的元素：

• 带有href属性的<a>
• 带href属性的<area>
• <button>
• <img>
• <input>
• 绑了form的<label>
• <textarea>
• …

参考文档

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1