Prevent onclick from firing

Question

I was working around with form submissions in html. Please take a look at below code

<form id="form1">
 <button id="btn1" onclick="clicked();">Submit</button>
</form>
<script>
    $("#btn1").click(function (event) {
        alert("event triggered");
        if(some_condition == true){
             // stop firing onclick method but it always submits the form
             event.stopImmediatePropogation(); // not working
             event.preventDefault(); // not working
             event.stopPropogation(); // not working it's for bubbled events
         }
     });
     function clicked(){ alert("clicked me"); }
</script>

I want to stop clicked() function from firing which is attached to inline onclick attribute. I would like to run my jquery click function and if something goes wrong, I dont want to trigger onclick but it always runs clicked() function. Could any one help me. Any help is greatly appreciated.

Is the `clicked()` function from the `onclick` attribute running *first*? Why do you even have an inline `onclick` attribute if you are using jQuery? Bind both handlers with the `.click()` function and whichever one you bind first can call `stopImmediatePropogation()` to prevent the second one from running. (Or combine them into a single handler.) — nnnnnn, Jul 02 '16 at 08:13
@nnnnnn sorry but "onclick" is auto generated code we cannot remove onclick event and if we want to attach events add them through jquery but we cannot remove onclick at any time and note "onclick" event handler runs last — user3205479, Jul 02 '16 at 08:16

score 7 · Accepted Answer · answered Jul 02 '16 at 08:14

7

The order in which an onxyz handler is called relative to dynamically-attached handlers varies from browser to browser, so your handler may well not run before the original does.

To deal with that, you save and remove the onclick handler:

var btn = $("#btn1");
var clickHandler = btn[0].onclick;
btn[0].onclick = false;

Then, in your handler, if you want that function to be called, you call it:

clickhandler.call(this, event);

Example:

// Get the button
var btn = $("#btn1");

// Save and remove the onclick handler
var clickHandler = btn[0].onclick;
btn[0].onclick = false;

// Hook up your handler
$("#btn1").click(function(event) {
  alert("event triggered");
  if (!confirm("Allow it?")) {
    // Disallowed, don't call it
    alert("stopped it");
  } else {
    // Allowed, call it
    clickHandler.call(this, event);
  }
});

// The onclick handler
function clicked() {
  alert("clicked me");
}

<form id="form1" onsubmit="return false">
  <button id="btn1" onclick="clicked();">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

answered Jul 02 '16 at 08:14

T.J. Crowder

1,031,962
187
1,923
1,875

Correct. Or, better yet, dump the inline `onclick` handler and use a single function, or bind both functions using jQuery. – nnnnnn Jul 02 '16 at 08:16
@nnnnnn: Indeed. I'm assuming that this is code being added to something where for some reason they can't change that HTML. (Surprising how many questions there are like that.) – T.J. Crowder Jul 02 '16 at 08:17
Yes, the OP just confirmed that that is the case in response to my comment under the question. – nnnnnn Jul 02 '16 at 08:18
I was thinking the same but I thought if there is any workaround but I believe it creates extra overhead of understanding code, Attaching onclick inline to html and setting it to false through js and running it using .call (the other way). Is not that confusing? code readability might be confusing to new people? – user3205479 Jul 02 '16 at 08:20
@user3205479: You have to do what you have to do. If you're stuck with that `onclick` handler being on there in the first place, then this is pretty much the only thing you can do to work around the differences in browsers. I don't think the code's particularly confusing, but you can use comments to help people coming later if you need to. – T.J. Crowder Jul 02 '16 at 08:25

score 1 · Answer 2 · answered Jul 02 '16 at 08:07

1

Try event.stopPropagation() api docs

answered Jul 02 '16 at 08:07

Vinay

548
2
12

It will not work, its for bubbled events and not for same element – user3205479 Jul 02 '16 at 08:08
You registered two listeners. – Vinay Jul 02 '16 at 08:12
The OP already tried `stopImmediatePropogation()`, which will do everything `stopPropagation()` does and more. – nnnnnn Jul 02 '16 at 08:13
onclick is not a listener its an handler attached, the only way is set to onclick= null; but how do i stop firing inline events from event listeners without setting to null – user3205479 Jul 02 '16 at 08:14
The requirements are inline "onclick" event, must be there its a requirement. – user3205479 Jul 02 '16 at 08:15
Read this thread http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute – Vinay Jul 02 '16 at 08:16

score 0 · Answer 3 · answered Jul 02 '16 at 08:39

if condition is true then remove the 'onclick' attribute

if (some_condition == true) {
    $("#btn1").removeAttr('onclick').click(function(event) {
        alert("event triggered");

        //do something
    });
}


function clicked() {
    alert("clicked me");
}

score 0 · Answer 4 · edited May 23 '17 at 12:00

I am sharing a quick workaround without knowing why you cannot add logic to stop adding "onclick="clicked();" code which you are saying getting automatically added.

I recommend you hide button with id as "btn1". Add style display:none. You donot need on ready function for this but simply add style attribute to the button btn1 or if that is also not possible directly then use jQuery to do that post document ready. Read : How to change css display none or block property using Jquery?

Then add a new button to the form using jQuery with id as "btn2" and add register the btn2 click event as well. DO this after form load.

<form id="form1">
<div id="newbut">
<button id="btn1" onclick="clicked();">Submit</button>
</div>
</form>

jQuery("#newbut").html('<button id="btn2">Submit</button>');
$(document).on('click', '#btn2', function(){ 
     // Your Code
 });

Refer below url to how to register click event for new button:

Adding click event for a button created dynamically using jQuery jquery - Click event not working for dynamically created button

score -1 · Answer 5 · answered Jul 02 '16 at 11:12

-1

Can't you do the condition check and the clicked() logic in one function? i.e

<script>
 function clicked() { 
     if(some_condition == true){
         return;
     }
     alert("clicked me");
 }
</script>

answered Jul 02 '16 at 11:12

Umer Sufyan

156
1
8

Prevent onclick from firing

5 Answers5