How to intercept click and do something before and after?

user_15788238 0
Viewed 279

I am trying to intercept the click of a button to do something before and after.

How to trigger the original click?

const el = document.querySelector(selector);
if (!el) { return; }

# Save original onclick
const onclick = el.onclick;

# Change onlick
el.onclick = async function (event) {
    console.log('Before click');

    # TODO: call the orignal onclick? <-------- ???
    onclick.call(event);

    console.log('After click');
}

I get the following output

BEFORE CLICK
Uncaught (in promise) TypeError: onclick is null
javascript
2 Answers
user_158156230

Since you can only have one onclick handler at a time (when using Element.onclick), we just need to invoke the old function inside our new function. Here's the modified version of your code as you are likely intending:

var selector = ".blue";
window.onload = function() {
  const el = document.querySelector(selector);
  if (!el) {
    return;
  }
  // Add an initial onclick to test
  el.onclick = function(event) {
    console.log("first onclick called");
  };

  // Save original onclick
  const onclick = el.onclick;

  // Change onlick
  el.onclick = function(event) {
    console.log('Before click');

    // Call the orignal onclick
    if (onclick !== null) {
      onclick(event);
    }

    console.log('After click');
  }
}
<div class="red">Red</div>
<div class="blue">Blue (click me)</div>

Also note, you can use EventTarget.addEventListener to add multiple eventListeners instead without needing to handle the old eventListener

user_75038870
Related