React 蒙层点击态导致低端机中点击事件无法触发

最近项目中设计同学比较注重点击态，有一种点击态是按下后出现一个rgba(0, 0, 0, 0.08)的蒙层，就是一个简单的蒙层差点搞出事情。

最初我们用的都是这样的css代码来添加这种点击态

.button {
    position: relative;
    &:active:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.08);
    }
}

在较新的机型上运行都很正常，但是有同事提醒说这样写在低端机上会出现点不动的问题，按钮点击事件触发不了。

然后拿来一个IOS9系统的机器试了一下，果不其然，确实点击事件触发不了，奇怪的是，点边缘是可以的，但是点中间重要部分就是不行。

于是开始尝试解决办法，在想是不是因为after伪元素挡住了，低端机中，点击的时候先触发了active，然后在按钮上覆盖了一层伪元素after，然后就阻止了下面点击按钮事件的触发，当然这个只是猜测的原因。

后面尝试了一种方法把这个问题解决掉了，当然也还是用active和after，代码如下：

.button {
    position: relative;
    &:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: 0;
        background-color: rgba(0, 0, 0, 0.08);
    }
    &:active:after {
        opacity: 1;
    }
}

这个方法可以解决低端机因为添加蒙层点击态而导致按钮点击事件无法触发的问题，但具体原因还不清楚。