A concise, simpler way to debounce the onclick event

Question

Setup

I have a Mobile User Interface with its own UI Back Button in the bottom-left corner of the viewport.

N.B. In this case, the UI is an overlay which appears above the web-page being visited, so as much as I'm a fan of History.pushState(), in this case, I have no specific intention to maintain a navigable history of overlay views using History.pushState().

If the user has progressed into the UI-overlay by two or more views, then, whenever the UI Back Button is clicked or tapped, the UI-overlay should display the previous view.

---

Issue

I noticed my UI Back Button can be pretty sensitive and it's easy to inadvertently interact with it such that the EventListener thinks it has been tapped twice or even three times, when the user-intention is simply to tap it once.

---

Proposed Solution

Evidently some kind of debouncing is needed, as we might more commonly use with an onscroll or an onresize event.

I have written debouncers before using named setTimeout() functions and using clearTimeout() to repeatedly cancel the named setTimeout(), so that only one scroll or resize event (the very last one) actually fires.

But a debouncer with repeated clearTimeout() functions feels over-elaborate in this context.

---

Further Issues

Ideally, I am looking for a simple, quick, easy, non-verbose way to momentarily deactivate the EventListener after the first click has been detected.

• I could use removeEventListener() - but this requires, in every deployment, specific knowledge of the format of the original addEventListener()

• I could use AbortSignal - but this requires signal to be set in the options parameter of the original addEventListener() and I can't count on that

Is there a simple and generic approach to debouncing onclick events?

Answer 1

There is an unexpectedly simple way to debounce an onclick event, requiring only two lines of javascript.

The approach sets the CSS pointer-events property of the EventTarget to none before resetting it to auto moments later:

const myFunction = (e) => {
    
  e.target.style.setProperty('pointer-events', 'none');
  setTimeout(() => {e.target.style.setProperty('pointer-events', 'auto')}, 800);
    
  // REST OF FUNCTION HERE
}

---

Working Example:

const myElement = document.querySelector('.my-element');

const myFunction = (e) => {
    
  e.target.classList.add('unclickable');
  setTimeout(() => {e.target.classList.remove('unclickable')}, 2000);
    
  console.log('myElement clicked');
}
    
myElement.addEventListener('click', myFunction, false);

.my-element {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-family: sans-serif;
  font-weight: 900;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
  transition: opacity 0.3s linear;
  cursor: pointer;
}

.my-element.unclickable {
  opacity: 0.5;
  pointer-events: none;
}

<div class="my-element">Click me!</div>