- Source:
Methods
setupAutoTappedStates(elementopt, nullable, tappableElementsSelectoropt, nullable, tapEventsopt, tappedClassopt, nullable, tappedDurationopt, nullable)
This function registers a global event handler on the document body, to automatically add "tapped" states (as a CSS class) to "tappable" elements on "tap".
What is a "tap" you ask? Well, it's either a pointer click or a finger touch or anything resembling these actions on your current device.
The idea behind that is this: usually, on pointer devices, we have a :hover state to signify user interaction
with an element, while on touch devices, we only know that an interaction took place after a user touched an element
with his/her finger, "tapped" it so to speak. Styling a touch with CSS would only be possible via :focus, which
has the problems, that focus has a different meaning on pointer devices and the focus state does not end
automatically, resulting in trailing visual states.
So, what we do instead, is that we just generally observe taps (via "click" event, which works across devices as
expected) and set a class on the element, for a short time, which removes itself automatically again, to be able
to define a visual state or a short animation for that class. So, for example, let's say the function has been
executed. After that, you can define something like a.tapped { color: orange; }, which would result in orange
coloring for a short time, after clicking/touching the element. Combine this with :hover, :focus definitions
in CSS to define a complete effect setup.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
element |
HTMLElement |
<optional> <nullable> |
document.body | the element to use as delegation parent for events, should contain the tappable elements you'd like to target |
tappableElementsSelector |
String |
<optional> <nullable> |
'a, button, .button, input[type=button], input[type=submit]' | selector to identify a tappable element by in a delegated event handler |
tapEvents |
String | Array.<String> |
<optional> |
'click' | the DOM event(s) to register for taps |
tappedClass |
String |
<optional> <nullable> |
'tapped' | the CSS class to set on the element to signify the "tapped" state |
tappedDuration |
Number |
<optional> <nullable> |
200 | the duration in milliseconds, the "tapped" state should last |
- Source:
Throws:
error if element is not an HTMLElement
Example
setupAutoTappedStates();
setupAutoTappedStates(document.body, 'a, button', 'customevent');