Question

我在 IE 8- 10 中发现一个刺激性错误, 防止启动父元素的状态。如果点击事件的目标为父元素的子元素, 则父元素的活跃状态不会被触发。

< a href=> "http://jsfiddle.net/WilsonPage/6FYFj/1/" rel="noreferrer" 。这里是一个工作示例。如果您单击中文本, 元素不会改变颜色。如果您单击中除外的任何地方, 元素都会变成蓝色。

这是个问题, 因为它几乎让Cs(cs)变得无益:如果元素有子女, 激活的假状态在 IE 中将毫无用处。

以前有没有人遇到过这个问题,最好找到办法解决它?

Answer 1

这里简单易行:在该段增加一条cs规则。

工作示例

<强 > 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

我通过防止儿童元素上的指针活动来解决这个问题。这样, < code>: active 状态直接触发于父/ code 状态, 不需要传播。此解决方案的唯一缺点是您无法将事件听众( 甚至是 Css `: hover 选择器) 附加到孩子身上。因此您必须将您的所有活动听众移到父/ 父/ 。

.child { pointer-events: none; }

Here is jsFiddle https://jsbin.com/govelabuca/1/edit?css,output
Just uncomment the last line in css and compare the result in IE and other modern browser

Answer 3

您可以为 lt; p> 标签添加另一个 CSS 选择器, 这样您就可以

li:active { background: blue; }

将成为

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

Answer 4

我建议您在点击孩子的元素时使用笔记本或缩写, 执行父母的主动状态。

Answer 5

我在IE11上碰巧发现了这一点。我在用>建议的这个方法写一个拖网逻辑。

在我的情况下,我有一个有 td 单元格元素的行,并且使用 : pactive 对于父 tr 是其他浏览器的任务。对于 IE,我添加了一个 CSS 规则来瞄准单元格( tr.myRowClass & gt; td:active ), 并修改了在单元格 mosive 事件处理器中执行的 JS 习惯逻辑中的条件:

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

The remaining task is to find the target element: Determine which element the mouse pointer is on top of in Javascript

友情链接