单击一个孩子不会触发父母在 IE 中的 :active 状态答案

【问题标题】：Clicking a child doesn't trigger the parent's :active state in IE单击一个孩子不会触发父母在 IE 中的 :active 状态
【发布时间】：2012-05-31 23:10:04
【问题描述】：

我在 IE 8-10 中发现了一个令人讨厌的错误，该错误会阻止触发父级的活动状态。看来，如果父元素的子元素是单击事件的目标，则不会触发父元素的活动状态。

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

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

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

【问题讨论】：

我想你可以在 JQuery 中触发它？如果当然没有 CSS 解决方法
可能重复？ stackoverflow.com/questions/7820740/…
不是重复的；这是针对任何子元素（img 子元素可以替换为背景图片），另一个问题没有发布任何通用答案
发现 two more 问题也可以通过删除子元素或使用 JS 来解决问题
IE8的问题是你无法正确查看jsfiddle.net :P

标签： css internet-explorer pseudo-class

【解决方案1】：

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

.child { pointer-events: none; }

这里是 jsFiddle https://jsbin.com/govelabuca/1/edit?css,output
只需取消 css 中最后一行的注释，然后在 IE 和其他现代浏览器中比较结果

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

这是一个简单的解决方法：在段落中添加 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%;}

【讨论】：

为什么需要一个额外的 div？当你可以添加 p:active { background: blue;高度：100%； } 到 p 标签本身。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

li:active { background: blue; }

会变成

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

【讨论】：