div onclick event won't fire if css div:active moves it

Question

I hope the title is accurate enough to portray the problem that I'm facing.

I have a div (tried multiple different things: a, span, button, all face the same problem) that when it is clicked the onclick event will not fire, even though the css div:active will be called.

This appears to be due to the fact that in the div:active I set top: 6px to make a "push down" sort of effect. The effect looks nice, it's just that sometimes, if you click towards the top of the element, or in the center for some reason, the div will appear to "move out" of the way and not call the onclick event.

I thought that a good solution would be to wrap the element in another div then, and attach the onclick event to that div. To my surprise though, the clicks didn't fire towards the top or the middle of the button still.

If I remove top: 6px at the bottom of the div:active, the button works fine, it just doesn't have the same "pushed in" effect.

I'm finding it kind of difficult to explain, so here's a screenshot (the blue areas are where the onclick won't fire):

and here's the code for the initial attempt: http://jsfiddle.net/RS5Q5/6/

and the code for moving the onclick listener outside: http://jsfiddle.net/RS5Q5/4/ (onclick will fire everywhere in the div except the blue parts on the picture)

It's also worth noting that the middle and bottom blue areas appear to click fine in firefox, but not chrome or safari. The top blue area is still a problem.

Any fix or explanation to this strange behavior? Any guidance at all would be appreciated. Thank you.

Answer 1

Might be because the browser gets confused when content moves during a click event. This usually happens because the user presses the mouse button then drags before releasing, but I suppose the same would be true if the content itself moved under the click location.

What happens if you use the mousedown/mouseup events instead of click?