CODEWITHSUNDEEP
javascript
jbcedge
jbcedge

Reputation: 19505

Remove onclick event from img tag

Heres my code:

<div id="cmdt_1_1d" class="dt_state1" onclick="sel_test(this.id)">
<img id="cmdt_1_1i" onclick="dropit('cmdt_1_1');" src="/site/hitechpackaging/images/items/bags_menu.jpg ">
<span class="dt_link">
<a href="javascript://">BAGS</a>
</span>
</div>

Unfortunately I cannot modify this file, is there a way using javascript to disable the onclick from the img tag only.

I was using this script but it disable the onclick event from all images. But i want only from this component

var anchorElements = document.getElementsByTagName('img');
// for (var i in anchorElements)
 //   anchorElements[i].onclick = function() {
       // alert(this.id);
 //       return false;
 //   }

Any ideas will be appreciated.

Edited: Is there a way to stop the function dropit from executing, is it possible using javascript. On page load, etc.

another option is can i rename the img file using javascript??

Upvotes: 25

Views: 101146

Answers (6)

JKing
JKing

Reputation: 847

try something like this:

var badImage = document.getElementById("cmdt_1_1i");
badImage.onclick = null;
badImage.addEventListener("click", function(e) {
    e.preventDefault();
    e.stopPropagation();
    return null;
}, true);

Upvotes: 2

Kamen Stanchev
Kamen Stanchev

Reputation: 1

You can programmatically reassign event listeners. So in this case, it might look something like:

const images = document.querySelectorAll('#cmdt_1_1d img')
for (let i = 0; i < images.length; i++) {
  images[i].onclick = function() => {}
}

...where the query above returns all of the img tags that are descendants of the element with ID cmdt_1_1d, and reassigns each of their onclick listeners to an empty function. Therefore no actions will take place when those images are clicked.

Upvotes: -1

Marco
Marco

Reputation: 444

If you later need to restore the onclick property, you can save it in a field before overwriting it:

document.getElementById(id).saved=document.getElementById(id).onclick;
document.getElementById(id).onclick = '';

so that later you can restore it:

document.getElementById(id).onclick=document.getElementById(id).saved;

This can be useful especially in the case, in which the original onclick property contained some dynamically computed value.

Upvotes: 0

Gabe
Gabe

Reputation: 50493

var eles = document.getElementById('cmdt_1_1d').getElementsByTagName('img');
for (var i=0; i < eles.length; i++)
   eles[i].onclick = function() {
     return false;
   }

Upvotes: 16

RobG
RobG

Reputation: 147383

Lots of answers, but the simplest is:

document.getElementById('cmdt_1_1i').onclick = '';

Upvotes: 8

Bergi
Bergi

Reputation: 664484

document.getElementById('cmdt_1_1i').removeAttribute("onclick");

Upvotes: 59

Related Questions