单击子对象不会在IE中触发父对象的:active状态

Question

我在IE8-10中发现了一个恼人的bug，它阻止了父母的活动状态被触发。如果父元素的子元素是单击事件的目标，则父元素上的活动状态不会被触发。

Here is a working example。如果您单击<li>中的文本，元素将不会改变颜色。如果在<p>子元素以外的任何位置单击<li>，元素将变为蓝色。

这是一个问题，因为如果元素有任何子元素，这会使css :active伪状态在IE中变得无用。

以前有没有人遇到过这个问题，并且找到了更好的解决方法？

Answer 1

这里有一个简单的解决方法:向段落添加css规则。

CSS

ul { list-style: none; }
li { height: 50px; margin-bottom: 4px; background: red; }
li:active { background: blue; }
p:active { background: blue; height: 100%;}

Answer 2

我已经通过防止子元素上的指针事件修复了这个问题。这样，:active状态就会直接在父级上触发，而不需要传播。此解决方案唯一的缺点是您不能再将事件侦听器(甚至不是css :hover选择器)附加到子级。因此，您必须将所有事件侦听器移动到父事件侦听器。

.child { pointer-events: none; }

这里是jsFiddle https://jsbin.com/govelabuca/1/edit?css,output

只需在css中取消注释最后一行，并在IE和其他现代浏览器中比较结果

Answer 3

您可以为<p>标记添加另一个CSS选择器，这样您的

li:active { background: blue; }

将会变成

li:active, li p:active { background: blue; }