However, the page shouldn't be doing that because the state of the <button> is not actually affected by the mouse-pointer's state, so that entire "idle, down" state node shouldn't be there at all (nor "hover, pressed", as browsers use the same `:hover:not(:active)` state for the <button> as "hover" in that situation).
No, it needs to do that. When you click the mouse down outside the button, then enter the button area and release, you do not want to fire. So you need those extra states.
> When you click the mouse down outside the button, then enter the button area and release, you do not want to fire
If you're referring to not wanting the `mouseup` event to fire, you are correct - however web-pages should not be using `mouseup` / `mousedown` to detect <button> clicks in the first place: they should be listening to only the `click` event, which is not raised when the user releases a held-down mouse button anyway. And the `click` event is also raised when the <button> is activated by other means, such as the spacebar which makes it more accessible too.
When you have the page open, open your console and run this:
`document.querySelector('input[type=button]').addEventListener('click', e => console.log("button 'click' event") )`
and then do the mousedown-and-hover-and-release described and you won't see anything logged until you really do click on it.
