通常,元素在按压态/点击态时会使用 :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>
- …
参考文档