Other form elements have similar functionality depending on context, but any elements that are not interactive by default would require an additional keyboard event to work. What if you found yourself in a situation where you wanted to know what caused the “click” to happen? The click event is usually tied to a pointer device, typically the mouse, and yet here the Space or Enter key are triggering the same event. Now, let’s consider something here with this code. The code for the event listener is quite simple: const button = document.querySelector('#button') In case you are curious, Safari behaves the same as Chrome. Interestingly enough, with Chrome if you use Enter to interact with the button you won’t see the third state with the color change, much like Firefox. If you use the Space key to “click” the button you’ll see the third state with the color change and then the last. Chrome gives us a bit more as you’ll see the first two states the same as Firefox. The text changes as expected but the colors do not. It stays with the second, or “focused”, state during the interaction and then shifts to the last one. With Firefox you will only see the first two and last states when interacting with either Enter or Space keys to “click” it you do not see the third state. The first is the static state, the second is when the button has focus from a keyboard tabbing onto it, the third is the keyboard interaction, and the fourth is the result of the interaction. Consider this image that shows the states when interacting with the keyboard. The buttons in these examples are set to shift colors on its active state so you click it and it turns purple. One interesting difference to consider is the behavior of a button across different browsers, especially the way it is styled. Fundamentally, in this example the button is only aware of the click event, but not how it happened. There is no JavaScript to handle the keyboard functionality it’s a native feature of the browser. The same text appears and resets as well. You can also click somewhere else within the pen, tab to put focus on the button, and then use Space or Enter to “click” it. After a moment the original text will reset. In the example above, you can click the button and its text label will change. Yet the legacy feature does help a great deal with accessibility for obvious reasons. This is a bit of overlap with keyboard navigation and accessibility this native feature existed way before accessibility was a concern. For historical and usability reasons, one can “click” the button by putting focus on it with tabbing and then using the Space or Enter key on the keyboard. So consider just a simple button placed on the page for specific functionality when someone interacts with it.Ĭonsider that I said “interacts with it” instead of just clicking it. We are only really concerning ourselves over the basic clicking function of the element. As you may know, a button element can have native functionality within a form, for example it can submit a form in some situations. The part we’ll cover is obviously the “anywhere in a document for accessible, standard button functionality” part of that description. By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons’ appearance with CSS. The HTML element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality. The element, as described by MDN, is simply: How do we distinguish between different types of clicks? That’s what we’re diving into! First things first I actually have run into situations (though not many) where distinguishing between those two types of clicks comes in handy. Seen this way, a click is not always a “click” the way it’s typically defined. There are nuances associated with button clicks and these nuances, like the difference between a “click” from a mouse pointer and “click” from the keyboard. Take, for example, the click event listening to the grandfather of interactive elements, the element. They are minor and probably most people would never even notice them in the majority of use cases. Some nuances with the click event are typically not much a concern. It works on just about every HTML element there is, a core feature of the DOM API.Īs often the case with the DOM and JavaScript, there are nuances to consider. The click event is quite simple and easy to use you listen for the event and run code when the event is fired.
0 Comments
Leave a Reply. |