Нажатие на дочерний элемент не вызывает активное состояние родительского элемента в IE

Я обнаружил раздражающую ошибку в IE 8-10, которая не позволяет активировать родительское состояние. Похоже, что если дочерний элемент родительского элемента является целью события щелчка, активное состояние родительского элемента не запускается.

Вот рабочий пример. Если вы щелкните текст внутри <li>, элемент не изменит цвет. Если вы щелкните внутри <li> в любом месте, кроме <p> дочернего элемента, элемент станет синим.

Это проблема, поскольку псевдосостояние css: active в значительной степени становится бесполезным в IE, если у элемента есть дочерние элементы.

Кто-нибудь сталкивался с этой проблемой раньше, а еще лучше нашел способ ее решить?


css internet-explorer pseudo-class
person wilsonpage    schedule 25.05.2012    source источник
comment
Я полагаю, вы могли бы запустить его в JQuery? Если, конечно, нет обходного пути CSS   -  person mattytommo    schedule 25.05.2012
comment
Возможный дубликат? stackoverflow.com/questions/7820740/   -  person primavera133    schedule 25.05.2012
comment
Не дубликат; это для любого дочернего элемента (img дочерние элементы могут быть заменены фоновыми изображениями), а на другой вопрос нет общих ответов   -  person Dan Cecile    schedule 10.08.2012
comment
Найдено два больше вопросов, которые также помогают обойти проблему удалив дочерние элементы или используя JS   -  person Dan Cecile    schedule 10.08.2012
comment
проблема с IE8 в том, что вы не можете правильно просматривать jsfiddle.net: P   -  person Facundo Colombier    schedule 03.04.2014
comment
Я знаком с IE только через версию 8, но я знаю, что в IE8 действия распространяются только на этапе захвата, то есть если вы нажимаете что-то, что реагирует на щелчок, например ссылку, и ссылка находится в ‹a›, который находится в ‹li›, который находится в ‹ul›, который находится в ‹div›, браузер сначала проверяет ‹div›, затем ‹ul› и так далее, чтобы увидеть, прослушивает ли он щелчок. IE имеет только фазу захвата, все другие браузеры также имеют фазу восходящей цепочки, которая начинается с самого внутреннего элемента, по которому щелкнули мышью, и поднимается вверх по DOM. Не знаю, нужно ли вам это, но проверьте это.   -  person jimeast    schedule 09.05.2014
comment
Для будущих читателей эта ошибка все еще присутствует в IE9-11 в 2018 году, лучше всего исправить ее с помощью JS (события mousedown / mouseup).   -  person Mahn    schedule 10.08.2018

Ответы (5)


arrow_upward
1
arrow_downward

Вот простой обходной путь: добавьте в абзац правило css.

Рабочий пример

CSS

ul { list-style: none; }
li { height: 50px; margin-bottom: 4px; background: red; }
li:active { background: blue; }
p:active { background: blue; height: 100%;}
person Itay Gal    schedule 17.05.2014
comment
Зачем вам нужен дополнительный div? Когда можно просто добавить p: active {background: blue; высота: 100%; } в сам тег p. - person mohamedrias; 17.05.2014

arrow_upward
1
arrow_downward

Я решил проблему, предотвратив события указателя в дочернем элементе. Таким образом, состояние :active запускается непосредственно на родительском элементе и его не нужно распространять. Единственным недостатком этого решения является то, что вы больше не можете прикрепить прослушиватель событий (даже селектор css `: hover) к дочернему элементу. Таким образом, вам нужно переместить все прослушиватели событий в родительский.

.child { pointer-events: none; }

Вот jsFiddle https://jsbin.com/govelabuca/1/edit?css,output
Просто раскомментируйте последнюю строку в css и сравните результат в IE и другом современном браузере.

person Buksy    schedule 04.06.2020

arrow_upward
0
arrow_downward

Вы можете добавить еще один селектор CSS для тега <p>, чтобы ваш

li:active { background: blue; }

станет

li:active, li p:active { background: blue; }
person rwadhwani    schedule 08.04.2014

arrow_upward
0
arrow_downward

Я бы посоветовал вам использовать javascript или jquery для этого, когда вы щелкаете дочерний элемент, выполняйте активное состояние родительского элемента.

person Emperor Krauser    schedule 30.04.2014

arrow_upward
0
arrow_downward

Я наткнулся на это в IE11. Я писал логику стиля перетаскивания, используя этот подход, предложенный Мартином.

В моем случае у меня есть строка с td элементами ячеек, и использование :active для родительского tr выполняет работу для других браузеров. Для IE я добавил правило CSS для нацеливания на ячейки (tr.myRowClass > td:active) и изменил условие if в моей пользовательской логике JS, выполняемой во время обработчика событий mousemove ячеек:

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

Оставшаяся задача - найти целевой элемент: Определить, над каким элементом находится указатель мыши в Javascript

person Eyup Yusein    schedule 09.04.2019