从img标签中删除onclick事件

Question

这是我的代码：

<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>

不幸的是，我无法修改此文件，有没有办法使用 javascript 禁用仅来自 img 标签的 onclick。

我正在使用这个脚本，但它禁用了所有图像的 onclick 事件。但我只想要这个组件

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

任何想法将不胜感激。

编辑： 有没有办法阻止函数 dropit 执行，是否可以使用 javascript。页面加载等。

另一个选项是我可以使用 javascript 重命名 img 文件吗？？

Answer 1

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

Answer 2

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

Answer 3

很多答案，但最简单的是：

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

Answer 4

尝试这样的事情：

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

Answer 5

如果稍后需要恢复 onclick 属性，可以在覆盖之前将其保存在字段中：

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

以便稍后您可以恢复它：

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

这在原始 onclick 属性包含一些动态计算值的情况下尤其有用。

Answer 6

您可以通过编程方式重新分配事件侦听器。所以在这种情况下，它可能看起来像：

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

...上面的查询返回所有

img

标签，这些标签是 ID 为

cmdt_1_1d

的元素的后代，并将每个

onclick

侦听器重新分配给一个空函数。因此，单击这些图像时不会发生任何操作。