Щелчок по ребенку не вызывает родителя: активное состояние в IE

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

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

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

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

Ответ 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%;}

Ответ 2

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

li:active { background: blue; }

станет

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

Ответ 3

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

Ответ 4

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

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

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

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