Clicking a child doesn't trigger the parent's :active state in IE

Question

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.

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.

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?

I suppose you could trigger it in JQuery? If there's no CSS workaround of course — Mathew Thompson, May 25 '12 at 11:05
Possible duplicate? http://stackoverflow.com/questions/7820740/css-selector-active-not-working-on-child-element-click-in-ie8 — primavera133, May 25 '12 at 11:10
Not a duplicate; this is for any child element (`img` child elements can be replaced with background images), and the other question doesn't have any generic answers posted — Dan Cecile, Aug 10 '12 at 13:57
Found [two](http://stackoverflow.com/questions/3526206/css-active-pseudo-class-target-child-elements-in-ie?rq=1) [more](http://stackoverflow.com/questions/2769392/a-with-an-inner-span-not-triggering-active-state-in-ie-8) questions which also work around the problem by removing the child elements or by using JS — Dan Cecile, Aug 10 '12 at 15:33
the problem with IE8 is that you can't view correctly jsfiddle.net :P — Facundo Colombier, Apr 03 '14 at 18:13
I'm only familiar with IE through ver 8 but I do know that in IE8 actions only propagate in the capture phase that is if you click on something that responds to a click such as a link and the link is in a which is in a
For the future reader, this bug is still present in IE9-11 in 2018, your best bet is to fix it via JS (mousedown/mouseup events). — Mahn, Aug 10 '18 at 20:00

Itay Gal · Answer 1 · 2014-05-17T09:13:35.547

1

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

edited May 17 '14 at 09:13

answered May 17 '14 at 07:36

Itay Gal

10,706
6
36
75

Why you need an extra div? When you can just add p:active { background: blue; height: 100%; } to the p tag itself. – mohamedrias May 17 '14 at 07:43

score 1 · Answer 2 · answered Jun 04 '20 at 08:57

I have fixed the issue by preventing pointer-events on the child element. This way the :active state is triggered directly on the parent and doesn't need to be propagated. The only downside of this solution is you cannot attach an event listener (not even a css `:hover selector) to the child anymore. So you have to move all your event listeners to the parent.

.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

score 0 · Answer 3 · answered Apr 08 '14 at 09:31

0

You could add another CSS selector for the <p> tag so your

li:active { background: blue; }

will become

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

answered Apr 08 '14 at 09:31

rwadhwani

46
2

score 0 · Answer 4 · answered Apr 30 '14 at 05:24

0

I would suggest you would use javascript or jquery for that when you click a child element, perform the active state of of the parent.

answered Apr 30 '14 at 05:24

Emperor Krauser

218
2
8

score 0 · Answer 5 · answered Apr 09 '19 at 11:58

I've stumbled upon this on IE11. I was writing a drag-n-drop styling logic using this approach suggested by Martin.

In my case I have a row with td cell elements and using :active for the parent tr does the job for other browsers. For IE, I've added a CSS rule to target the cells (tr.myRowClass > td:active) and modified the if condition in my custom JS logic executed during the mousemove event handler of the cells:

 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

Clicking a child doesn't trigger the parent's :active state in IE

5 Answers5

Linked