CODEWITHSUNDEEP
javascriptjquery
Kango
Kango

Reputation: 847

How to stop javascript onclick event

I have external link which render image with javascript onclick event.

I need to stop this click event.How can i do this ?

For example:

Html is render by external script:
<div class="demo-link">
<img alt="" onclick="verifylock();" src="https://example.com" style="cursor:pointer;cursor:hand">
</div>

I have tried this with jquery but not get any luck:

$(".demo-link > img").click(function(e){
    e.preventDefault();
});

Upvotes: 0

Views: 420

Answers (5)

theadam
theadam

Reputation: 4061

You can always return false from the onClick event handler, call preventDefault, stopImmediatePropagation or other methods, but it would be no use here since HTMLs onclick gets invoked BEFORE jQuery onclick. If you do not want to simply remove the 'onclick' from HTML, you can change it programmatically (and even store it with jquery data() method for future use if needed).

$(".demo-link > img").each(function(e) {
   $(this).onclick = function() { // overriding the onclick
       return false;
   }
});

A working snippet below:

function defaultOnClick() {
  alert('Default event handler invoked!');
}

$('.clickable').each(function() {
  $(this).data('onClickBackup', this.onclick);

  this.onclick = function(event) {
    alert('Overriden onclick');
    return false;

    // if you need to ever call the original onclick, then call below
    // $(this).data('onClickBackup').call(this, event || window.event);
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="clickable" onclick="defaultOnClick()">Click me!</div>

Upvotes: 1

Joel
Joel

Reputation: 1843

Try your own code with return false;

<img alt="" onclick="verifylock(); return false;" src="https://example.com" style="cursor:pointer;cursor:hand">
</div>

Upvotes: 0

Swapnil Motewar
Swapnil Motewar

Reputation: 1088

You are writing event on click and calling a function using onclick in img tag. So remove onclick from img tag like.

<img alt="" src="https://example.com" style="cursor:pointer;cursor:hand">

if you want to call a function verifylock() call it from handler for click

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can remove the onclick value when dom is ready:

$('.demo-link > img').attr('onclick','').unbind('click');

Working Demo

Upvotes: 1

GeekRiky
GeekRiky

Reputation: 375

$(".demo-link > img").click(function(e){
   return false;
});

Upvotes: 0

Related Questions