a:active vs mousedown event preventDefault()-ed

Question

The case

• we have an <a> element with :active state specified in CSS
• in JavaScript code we listen to mousedown event and call event.preventDefault() for some reasons :)
• As a result: in Firefox when I move mouse cursor over the anchor and click it -- anchor is not displayed as :active
• I have also tested this issue in some Chrome / Opera / IE versions -- all that browsers had decorated the anchor as if it was :active.

Here is a test for the case: http://jsbin.com/azajex/4

The question

On W3C there is not deep description, what must be considered active and when.

But all browsers (maybe, not all?) except FF handle mousedown firstly by CSS engine and render the element as :active. It appears to be a long time issue, I tested this case in FF 3.6, 8.0, 13.0 -- all that versions behave exactly the same.

So, what is the right behaviour of a browser in this case?

Answer 1

There is no 'correct behavior'. It is up to browser implementations and should not be relied upon. This is known as undefined behavior. In software engineering, undefined behaviors should be not be relied upon as it has no true documentation nor are the results verifiable.

CSS does not define which elements may be in the above states [pseudo-classes: :hover, :active, and :focus], or how the states are entered and left. Scripting may change whether elements react to user events or not, and different devices and UAs[browsers] may have different ways of pointing to, or activating elements. -W3C CSS Selectors