javascript 轨道focus.js

Posted 2021-05-03

/*! track-focus v 1.0.0 | Author: Jeremy Fields [[e-mail]], 2015 | License: MIT */
// inspired by: http://irama.org/pkg/keyboard-focus-0.3/jquery.keyboard-focus.js
 
/**
 * Tracks an element is focused via the mouse or keyboard. On mouse focus, adds
 * the mouseClass to the element.
 *
 * Adapted from: https://github.com/ten1seven/track-focus/blob/master/src/javascripts/track-focus.js
 */
 
/*
 &.focus--mouse {
    a,
    button {
        outline: 0 !important;
    }
}
*/
 
export default function trackFocus(el, mouseClass = 'focus--mouse') {
    let usingMouse;
 
    function preFocus(event) {
        usingMouse = event.type === 'mousedown';
    }
 
    function addFocus(event) {
        if (usingMouse) el.classList.add(mouseClass);
    }
 
    function removeFocus(event) {
        el.classList.remove(mouseClass);
    }
 
    function bindEvents() {
        el.addEventListener('keydown', preFocus);
        el.addEventListener('mousedown', preFocus);
        el.addEventListener('focusin', addFocus);
        el.addEventListener('focusout', removeFocus);
    }
 
    function unbindEvents() {
        el.removeEventListener('keydown', preFocus);
        el.removeEventListener('mousedown', preFocus);
        el.removeEventListener('focusin', addFocus);
        el.removeEventListener('focusout', removeFocus);
    }
 
    bindEvents();
 
    return unbindEvents;
}