Event From
Determine if a browser event was caused by mouse
, touch
, or key
input. Can be used to:
- Ignore
mouse
events caused by touch
input. - Determine if
focus
was initiated from the keyboard (to know when to add focus styles). - Determining if a
click
event was from mouse
, touch
, or key
input. - And anything else where knowing the type of user interaction that generated the event is helpful.
- You may also be interested in Detect It, which detects if a device is
mouseOnly
, touchOnly
, or hybrid
, and if the primary input is mouse
or touch
.
Demo website (code in the demo repo)
npm install --save event-from
import { eventFrom } from 'event-from';
const handleEvent = (event) => {
eventFrom(event);
};
Ignore mouse
events caused by touch
input
Note that a touch interaction will fire Touch Events as the interaction is in progress (touch on the screen), and will fire Mouse Events during a long press (extended touch on the screen), or after the touch interaction has finished (after the touch is removed from the screen) to support sites that only listen for Mouse Events.
import { eventFrom } from 'event-from';
const handleMouseEvent = (e) => {
if (eventFrom(e) !== 'mouse') return;
};
element.addEventListener('mouseenter', handleMouseEvent, false);
Determine if a focus
event was from key
input for accessibility
import { eventFrom } from 'event-from';
const handleFocusEvent = (e) => {
if (eventFrom(e) === 'key') {
}
};
element.addEventListener('focus', handleFocusEvent, false);
Determine if a click
event was from mouse
, touch
, or key
input
import { eventFrom } from 'event-from';
const handleClickEvent = (e) => {
switch (eventFrom(e)) {
case 'mouse':
break;
case 'touch':
break;
case 'key':
break;
}
};
element.addEventListener('click', handleClickEvent, false);
setEventFrom(value)
value: 'mouse' | 'touch' | 'key'
Temporarily set the return value for eventFrom(e)
. This is useful when manually generating events, for example calling el.focus()
or el.click()
, and you want eventFrom(e)
to treat that event as occurring from a specific input.
import { eventFrom, setEventFrom } from 'event-from';
const handleFocusEvent = (e) => {
if (eventFrom(e) === 'key') {
}
};
const element = document.getElementById('focus-example');
element.addEventListener('focus', handleFocusEvent, false);
setEventFrom('key');
element.focus();
How it works
Event From sets passive capture phase event listeners on the document
and window
and tracks the recent event history to know what input type is responsible for the event that's passed to eventFrom(event)
.
The listeners that Event From sets are all low frequency event listeners (enter/leave/down/up/focus/etc). Event From does not set any high frequency listeners such as move
or scroll
listeners.