场景

移动端 web

过程

在 IOS 中，点击按钮包裹的图片区域，无法触发 click 事件

在 android 中正常

测试机型

• IPHONE 6 PLUS IOS 9.3.3

  • 微信

    @H_502_20@

  • Safari

    @H_502_20@
  @H_502_20@

• 魅族 MX5 android 5.1

  • 微信

    @H_502_20@

  • 系统浏览器

    @H_502_20@

  • chrome (比系统浏览器更卡)

    @H_502_20@
  @H_502_20@

代码

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 事件的冒泡

解决方案

• 修改样式

  @H_502_20@

• 使用 touch 事件替换

  @H_502_20@