{"id":343064,"date":"2021-06-30T07:45:42","date_gmt":"2021-06-30T14:45:42","guid":{"rendered":"https:\/\/css-tricks.com\/?p=343064"},"modified":"2021-07-18T21:56:04","modified_gmt":"2021-07-19T04:56:04","slug":"when-a-click-is-not-just-a-click","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/when-a-click-is-not-just-a-click\/","title":{"rendered":"When a Click is Not Just a Click"},"content":{"rendered":"\n

The click<\/code> event is quite simple and easy to use; you listen for the event and run code when the event is fired. It works on just about every HTML element there is, a core feature of the DOM API.<\/p>\n\n\n\n

As often the case with the DOM and JavaScript, there are nuances to consider. Some nuances with the click <\/kbd>event are typically not much a concern. They are minor and probably most people would never even notice them in the majority of use cases.<\/p>\n\n\n\n\n\n\n\n

Take, for example, the click<\/code> event listening to the grandfather of interactive elements, the <button><\/code> element. There are nuances associated with button clicks and these nuances, like the difference between a \u201cclick\u201d from a mouse pointer and \u201cclick\u201d from the keyboard. Seen this way, a click is not always a \u201cclick\u201d the way it\u2019s typically defined. I actually have run into situations (though not many) where distinguishing between those two types of clicks comes in handy.<\/p>\n\n\n\n

How do we distinguish between different types of clicks? That\u2019s what we\u2019re diving into!<\/p>\n\n\n

First things first<\/h3>\n\n\n

The <button><\/code> element, as described by MDN<\/a>, is simply:<\/p>\n\n\n\n

The HTML <\/strong>element<\/strong> represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality. By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons\u2019 appearance with CSS.<\/p><\/blockquote>\n\n\n\n

The part we\u2019ll cover is obviously the \u201canywhere in a document for accessible, standard button functionality\u201d part of that description. As you may know, a button element can have native functionality within a form, for example it can submit a form in some situations. We are only really concerning ourselves over the basic clicking function of the element. So consider just a simple button placed on the page for specific functionality when someone interacts with it.<\/p>\n\n\n\n