How to block inline onclick event and call it later in own click listener?

Question

How can I block the inline onclick event of a button and call the function defined in that onclick later in my own click listener?

I try to inject some code which should execute before the button's onclick code is getting called.

function doSomething(el) {
  console.log("doSomething was called...");
}

jQuery("#test").click(function(e) {
  e.preventDefault();
  console.log("click listener called...");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="test" onclick="doSomething(this)">Submit</button>

I try to execute some code before the onclick code is getting called, so yes, in other words, the precedence should be swapped. — Black
– Black, Commented Aug 7, 2019 at 10:05

Rory McCrossan · Accepted Answer · 2019-08-07 10:06:08Z

7

You can get a reference to the original inline handler from the element through its onclick property, which you can then reset to null. Then you can call the original inline function from within your own jQuery event handler when required, something like this:

var test = document.getElementById('test');
var originalInlineClickHandler = test.onclick;
test.onclick = null;

function doSomething(el) {
  console.log("doSomething was called...");
}

$(function() {
  jQuery("#test").click(function(e) {
    e.preventDefault();
    console.log("click listener called...");
    originalInlineClickHandler();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="test" onclick="doSomething(this)">Submit</button>

It should be noted that this is rather hacky. I'd strongly suggest removing the inline event handler from the HTML, if possible.

answered Aug 7, 2019 at 10:06

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Black Over a year ago

Does it also work with jQuery btw? I tried var originalInlineClickHandler = jQuery("#test").onclick; but it does not work. It says: Uncaught TypeError: originalInlineClickHandler is not a function

Rory McCrossan Over a year ago

Not like that as jQuery doesn't have an onclick property. You could use $('#test')[0].onclick instead, though.

tenor528 · Accepted Answer · 2019-08-07 10:07:18Z

1

You could have an event for hover or mouseDown, but neither of those promise that there will be a click event. If you want to delete the inline onclick completely, you can unset it on the element in one of these events with something like element.onclick = null;.

answered Aug 7, 2019 at 10:07

tenor528

1,17513 silver badges21 bronze badges

2 Comments

Black Over a year ago

It does not answer my question sorry

tenor528 Over a year ago

I agree that it doesn't fully answer the question, but it doesn't give you a way to access the button before it's clicked. How you want to save the value to click that button later is more dependent on your app. Regardless, I hope the other answer works better for you!

Collectives™ on Stack Overflow

How to block inline onclick event and call it later in own click listener?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related