单击子项不会在IE中触发父项的：活动状态 [英] Clicking a child doesn't trigger the parent's :active state in IE

问题描述

我发现一个刺激性的错误在IE 8-10，阻止父的活动状态被触发。看起来如果父元素的子元素是点击事件的目标，父元素上的活动状态不会被触发。

I have found an irritating bug in IE 8-10 that prevents a parent's active state being triggered. It appears that if a child of the parent element is the target of the click event the active state on the parent element is not triggered.

这是一个工作示例。如果单击< li> 中的文本，元素不会更改颜色。如果在< p> 子项之外的任何位置单击< li> 。

Here is a working example. If you click the text inside the <li> the element wont change colour. If you click inside an <li> anywhere other than on the <p> child the element will turn blue.

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

This is a problem as it pretty much renders the css :active pseudo state useless in IE if the element has any children.

之前有没有人遇到过这个问题，甚至更好地找到了一种方法呢？

Has anyone encountered this problem before, and even better found a way round it?

推荐答案

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

Here's an easy workaround: add a css rule to the paragraph.

工作示例

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%;}

这篇关于单击子项不会在IE中触发父项的：活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！