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

问题

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?

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

回答2:

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

回答3:

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.

回答4:

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

来源：https://stackoverflow.com/questions/10753215/clicking-a-child-doesnt-trigger-the-parents-active-state-in-ie