15

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

这是一个工作示例。如果单击<li>元素内的文本，则不会改变颜色。如果您单击子元素<li>以外的任何位置，<p>该元素将变为蓝色。

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

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

4

5 回答 5

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%;}
于 2014-05-17T07:36:38.700 回答
1

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

.child { pointer-events: none; }

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

于 2020-06-04T08:57:08.670 回答
0

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

于 2014-04-30T05:24:21.107 回答
0

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

li:active { background: blue; }

会变成

li:active, li p:active { background: blue; }
于 2014-04-08T09:31:15.250 回答
0

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

在我的情况下，我有一行包含td单元格元素，并且:active为父级使用tr为其他浏览器完成了这项工作。对于 IE，我添加了一个 CSS 规则来定位单元格 ( ) 并修改了在单元格事件处理程序tr.myRowClass > td:active期间执行的自定义 JS 逻辑中的 if 条件：mousemove

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

剩下的任务是找到目标元素： 在Javascript中确定鼠标指针在哪个元素之上

于 2019-04-09T11:58:46.347 回答