Question

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

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

这是一个问题，因为它几乎使得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; }

Answer 4

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

Answer 5

我在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

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

5 个答案: