为什么浏览器在决定调用哪个 onclick 事件处理程序之前先应用 CSS styles？

Question

I have a single div on a page. It has an onclick event handler. When the user clicks on that div I expect that the event handler will be called. But there is this CSS rule as well: when that div has a focus, it will be moved 50 pixels to the right (away from the mouse pointer). As a result of this the onclick event handler is not called, even though the user clearly clicked on that div at the beginning. It's as if the browser first applies CSS and only after that decides, what did the user clicked on.

I made a simple demo here: https://jsbin.com/yalazam/edit?html,css,console,output Click on the yellow square (that is the div ) in the fourth column and see the console in the third column. Only a message "focus square" will appear, but not a "click square" .

Does this behavior makes any sense? Is there any case when it is useful? Or should I just accept it as a weird behavior of the browser?

Answer 1

The relevant point here consists in the definition of what a click event is:

An element receives a click event when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. If the button is pressed on one element and the pointer is moved outside the element before the button is released, the event is fired on the most specific ancestor element that contained both elements.

This means that in your example, no click event is fired on the div you're targeting, because although the mouse press happens inside that div, the release happens after it has moved (unless the user does something unnatural) so is not within the same element. A click event will fire on the body (which in your example is the "most specific ancestor" referred to on MDN), but that won't be terribly helpful to you to listen for - because a click on the body can happen in many other ways, and you can't event use the event's target property to see where it originated, because in this case that is the body itself as explained.

If you really need this effect then use the mouseDown or mouseUp event rather than click , depending on what feels most natural to you. But the real answer is not to do this, as it is likely to be unexpected to your users and annoy them.