我在 IE 8-10 中发现了一个恼人的错误,它阻止了父级的活动状态被触发。看来,如果父元素的子元素是单击事件的目标,则不会触发父元素的活动状态。
这是一个工作示例。如果单击<li>
元素内的文本,则不会改变颜色。如果您单击子元素<li>
以外的任何位置,<p>
该元素将变为蓝色。
这是一个问题,因为如果元素有任何子元素,它几乎会使 IE 中的 css :active 伪状态无用。
以前有没有人遇到过这个问题,甚至更好地找到了解决方法?
我在 IE 8-10 中发现了一个恼人的错误,它阻止了父级的活动状态被触发。看来,如果父元素的子元素是单击事件的目标,则不会触发父元素的活动状态。
这是一个工作示例。如果单击<li>
元素内的文本,则不会改变颜色。如果您单击子元素<li>
以外的任何位置,<p>
该元素将变为蓝色。
这是一个问题,因为如果元素有任何子元素,它几乎会使 IE 中的 css :active 伪状态无用。
以前有没有人遇到过这个问题,甚至更好地找到了解决方法?
这是一个简单的解决方法:在段落中添加 css 规则。
CSS
ul { list-style: none; }
li { height: 50px; margin-bottom: 4px; background: red; }
li:active { background: blue; }
p:active { background: blue; height: 100%;}
我通过防止子元素上的指针事件解决了这个问题。这样:active
状态直接在父节点上触发,不需要传播。此解决方案的唯一缺点是您不能再将事件侦听器(甚至不是 css `:hover 选择器)附加到孩子。因此,您必须将所有事件侦听器移至父级。
.child { pointer-events: none; }
这里是 jsFiddle https://jsbin.com/govelabuca/1/edit?css,output
只需取消 css 中最后一行的注释并比较 IE 和其他现代浏览器中的结果
我建议您在单击子元素时使用 javascript 或 jquery,执行父元素的活动状态。
<p>
您可以为标签添加另一个 CSS 选择器,以便您的
li:active { background: blue; }
会变成
li:active, li p:active { background: blue; }
我在 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中确定鼠标指针在哪个元素之上