3 ms·

Neat. ...how do I get the button into the "idle, down" state? (i.e. how do you press a button without first hovering over it? I tried with [Tab] and spacebar t

Neat. ...how do I get the button into the "idle, down" state? (i.e. how do you press a button without first hovering over it? I tried with [Tab] and spacebar to activate it, but that didn't do anything). ------ I'm thinking this page could likely be reimplemented without any JavaScript, using only CSS' interaction state pseudo-classes (`:active, :hover, :focus`, etc) as proxies for the button's state (with the sibling `~` selector to control the state-diagram image). Hmm, though the "held outside" state might be difficult (perhaps `body:hover button:not(:hover):active ~ #stateImage` would work for that?).

beaconstudios 5y ago
just hold down the mouse outside the button.
- DaiPlusPlus 5y ago
  aaaahh! now I feel silly. 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).
  - FabHK 5y ago
    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.
    - DaiPlusPlus 5y ago
      > 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.
evan_ 5y ago
> how do I get the button into the "idle, down" state? Click and hold outside of the button, and drag over it.
randomcarbloke 5y ago
I figured this out too but I wonder if the button is strictly the fsm if the mouse state is also being tracked, in the example yes, if there was more than one button probably not... but the idea is brilliant and probably worth playing with.

beaconstudios 5y ago

just hold down the mouse outside the button.

DaiPlusPlus 5y ago
aaaahh! now I feel silly. 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).
- FabHK 5y ago
  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.
  - DaiPlusPlus 5y ago
    > 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.

evan_ 5y ago

> how do I get the button into the "idle, down" state? Click and hold outside of the button, and drag over it.

randomcarbloke 5y ago

I figured this out too but I wonder if the button is strictly the fsm if the mouse state is also being tracked, in the example yes, if there was more than one button probably not... but the idea is brilliant and probably worth playing with.