Open Bug 771241 Opened 12 years ago Updated 2 years ago

The :active pseudo class is turned off by event.preventDefault() for the mouseover event (for an absolutely positioned element nested within another absolutely positioned element)

Categories

(Core :: DOM: Events, defect, P5)

Product:
Core
Component:
DOM: Events
Version:
13 Branch
Platform:
x86_64
Windows 7
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: enfantsauvage, Unassigned)

References

(
URL
)

Details

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.47 Safari/536.11

Steps to reproduce:

Example of bug can be found here: http://jsfiddle.net/Husar/S8K5g/3/

If you absolutly position an element within another absolutly positioned elemnt, and than set event.preventDefault() on the mousedown event with jQuery - the active pseudo class doesn't seem to affect the first element any more.


Actual results:

The element didn't change position. The active pseudo class wasn't registered.


Expected results:

The element should have moved 20px
Component: Untriaged → DOM
Product: Firefox → Core
If you preventDefault mousedown, then there is no active anything, since things become active as the default action of mousedown....  So what's the issue?
Component: DOM → DOM: Events
I have a similar issue here: bug 773210

In my case -- all works fine in all browsers, except FF.
Maybe all the rest browsers are doing wrong, maybe )

The point is: FF treats CSS and JavaScript at the same time but is it the right way?
Does CSS instructions must depend on the JS instructions?

I have not found any rules for that case of W3C http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
The spec doesn't define anything about when things are actually considered "active".
Yes, spec does not cover the :active state in deep.

FYI: I have posted a question on stackoverflow here:
http://stackoverflow.com/questions/11464520/aactive-vs-mousedown-event-preventdefault-ed
I have missed this part in spec (see the answer on stackoverflow):

> 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.

Thus -- this must not be considered a bug.
Hi,

we just ran into this bug and wanted to let you know some details about our use case.

We use event.preventDefault() on mousedown to prevent the element from gaining the focus. We also use the :active selector to set a different background-color when the element is pressed. This works fine in IE and Chrome, but unfortunately not in Firefox. The focus gain is prevented, but the :active state is not set.

We could workaround this problem by setting a css class on mousedown and removing it on mouseup, but it would be great if we just could use the :active selector, as we can with the other browsers.
Priority: -- → P5

Just came here to post I also ran into this. It works on all other browsers. I use preventDefault because I don't want my input field to lose focus when I click on a button. On the other hand, I need active state to show on a button because I use it to retrigger animation. Sadly it works everywhere but Firefox. Too often I get issues with Firefox for following the specs too strictly :(

Same use case as others, for me -- I need to use preventDefault to prevent the button from gaining focus when it's activated in certain contexts. FWIW - Rather than go through the trouble of simulating the :active state just to appease FireFox in these cases, my decision was to just accept that FireFox will provide a slightly degraded experience.

To respond to a (much much) earlier comment:

If you preventDefault mousedown, then there is no active anything, since things become active as the default action of mousedown.... So what's the issue?

preventDefault on the mousedown event doesn't prevent the button from being activated in any practical sense, in any browser that I'm aware of. That is, the click event is still fired.

That being the case, suppressing the :active state here doesn't make much sense IMO.

preventDefault on the mousedown event doesn't prevent the button from being activated

Right, being "active" in the sense of :active is not at all the same thing as "user activation" in the sense of click events.

For example, if I mouse down on a link, then drag it somewhere, it will go into :active on mouse down, but will not end up activated (because I don't end up clicking on it, due to mousing up outside the link, etc).

Also a bug on our end.

In my opinion preventing events in JS should not prevent CSS states.

Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.