怎样解释用pointer-events: none;解决苹果使用:checked要点两次的问题？

Question

HTML结构是这样，就是一个模拟radio的东西，功能就是点击哪个选项，那个选项就打钩。

CSS的核心部分就是用:checked，使得input选中时就带上.checked-icon这个类。

.list-radio{
    position: absolute;
    left: -9999em;
}
/*
:checked匹配每个已被选中的 input 元素（只用于单选按钮和复选框）
*/
.list-radio:checked + .checked-icon{
    /*打钩图片*/
    background: url(../../../../image/checked.png) no-repeat;
    background-size: 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    float: right;
}

在电脑上和安卓机上这样都没问题，但是在苹果机上就有问题了，要点两次那个勾的图片才会出现，但是checked的值在点第一次的时候已经变了。后来在label标签上加上了这个就可以了：

.list-label > * {
    pointer-events: none;
}

pointer-events: none;是可以完全禁止点击事件的，那怎样解释禁止点击事件就可以了呢？我个人觉得是因为事件冒泡那方面，求正解！

Answer 1

https://developer.mozilla.org...

感谢题主分享，我也是第一次发现这个事情~~具体可以看看上面这个网址，希望可以帮助到你~