单击子项不会触发IE中的父项：活动状态

Question

我在IE 8-10中发现了一个令人恼火的错误，它会阻止父母的活动状态被触发。看来，如果父元素的子元素是click事件的目标，则不会触发父元素上的活动状态。

Here is a working example。如果单击<li>内的文本，元素将不会更改颜色。如果你在<li>孩子以外的任何地方点击<p>，元素将变为蓝色。

这是一个问题，因为它几乎使得css：active伪状态在IE中无用，如果该元素有任何子元素。

有没有人以前遇到过这个问题，甚至更好地找到了解决方法呢？

Answer 1

这是一个简单的解决方法：在段落中添加css规则。

Working example

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

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

li:active { background: blue; }

会变成

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

Answer 3

我建议您在单击子元素时使用javascript或jquery，执行父元素的活动状态。

Answer 4

我在IE11上偶然发现了这个问题。我正在使用Martin建议的这种方法编写拖放式样式逻辑。

在我的情况下，我有一行td单元格元素和使用:active父亲tr做其他浏览器的工作。对于IE，我添加了一个CSS规则来定位单元格（tr.myRowClass > td:active）并修改了在单元格的mousemove事件处理程序中执行的自定义JS逻辑中的if条件：

 if (style.getPropertyValue('cursor') == 'auto' || document.querySelectorAll(":active").length > 0) {

剩下的任务是找到目标元素：Determine which element the mouse pointer is on top of in Javascript