场景
移动端 web
过程
在 IOS 中，点击按钮包裹的图片区域，无法触发 click 事件
在 android 中正常
测试机型
-
IPHONE 6 PLUS IOS 9.3.3
微信
Safari
-
魅族 MX5 android 5.1
微信
系统浏览器
chrome (比系统浏览器更卡)
代码
button:before {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
background: rgba(0,.4);
}
button img {
position: relative;
}
button:active:before {
z-index: 1; / 重点来了 /
}
分析
可能是按钮激活时，伪元素层级相对 IMG 元素改变了，阻碍了 click 事件的冒泡
解决方案
修改样式
使用 touch 事件替换
