debouncing-buttons

A possible solution, when you want to avoid firing some event, but have no control of it.

How to run

1. Install deps:

   npm install

2. Run the project:

   npm run start

Concept

The core of this project is:

const blockerFn = e => {
  e.stopImmediatePropagation();
  console.log("Keydown event blocked.");
};

window.addEventListener(evtType, blockerFn, true);

Which stops event of specified type from propagating across whole DOM. This may break some stuff on your page, if you didn't constrain the blocker. So for that let's remove the handler if we don't need it:

window.removeEventListener(evtType, blockerFn, true);

This logic is composed inside two functions: setEventBlocker(evtType) and removeEventBlocker(evtType, blockerFn)

Finally, every input element, which suffers from that event, can block it:

let blockerFn;

const inputFields = document.querySelectorAll('input');

if (inputFields && inputFields.length) {
  inputFields.forEach(el => {

    // Set eventBlocker when focused
    el.addEventListener('focus', () => {
      if (!blockerFn) {
        console.log('Setting event blocker.');
        blockerFn = setEventBlocker(eventType);
      }
    });

    // Remove eventBlocker when unfocused
    el.addEventListener('blur', () => {
      if (blockerFn instanceof Function) {
        console.log('Removing event blocker.');
        removeEventBlocker(eventType, blockerFn);
        blockerFn = null;
      }
    });
  });
}