从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文件？

- jbcedge

---

你已经在问题中拥有了完成它的代码。也许你的问题不是如何禁用它，而是如何隔离这个特定的图像，而不禁用所有图像，且又不知道其id。 - Joel Etherton

Answer 1

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

- Bergi

---

很好 - 我完全没有想到removeAttribute - 这可能是最明智的方法，而不是拦截/覆盖它 - 只需将其删除！ - JKing

是的，这很不寻常，但对于“侵入式”JavaScript应该可以工作 :-) - Bergi

@Bergi，你对不引人注目的定义似乎与其他人不同，你的答案只是纯JS。 "不引人注目"的JavaScript会等待文档加载，会测试元素是否存在，然后再测试removeAttribute是否受支持，然后才调用它。 - RobG

@RobG：是的，没错。我所说的“obtrusive”指的是HTML源代码中硬编码的 on-event 属性。 - Bergi

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

- Gabe

---

谢谢Gabe，它运行得很好，但我想知道是否有一种方法可以禁用div内的所有img标签。因为会有很多图像文件，我们不知道它们的名称。这可能吗？ - jbcedge

吹毛求疵：（虽然这是一个好答案）没有getElement_s_ById - 每个Id只应该有一个元素。 - JKing

你知道它们所在的 div 的名称吗？CSS 选择器非常强大 - 只要你对图片的位置有一定了解，就可以轻松实现。类似 document.querySelectorAll("div#thatContainsImages img") 这样的代码将会获取到该 div 中所有后代 img 标签的 NodeList。 - JKing

@Gabe - 这会用一个新函数替换 onclick 属性值，最好将其设置为 ''（空字符串），这样就没有监听器了（而且还有语法错误）。 - RobG

我建议使用 eles[i].onclick = null。这将确保没有 onclick 事件被附加。 - Vitaliy

Answer 3

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

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

- RobG

Answer 4

尝试像这样做：

尝试像这样做：

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

- JKing

---

救了我的一天，谢谢。 - Phan Đức Bình

救救我吧，谢谢。 - undefined

Answer 5

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

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

这样以后你就可以恢复它：

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

这在特定情况下非常有用，尤其是当原始的onclick属性包含一些动态计算的值时。

- Marco

Answer 6

您可以通过编程重新分配事件监听器。因此，在这种情况下，它可能看起来像这样：

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

...上面的查询返回所有ID为cmdt_1_1d元素的后代中的所有img标签，并将它们每个的onclick监听器重新分配为空函数。因此，当单击这些图像时不会执行任何操作。

- Kamen Stanchev

---

您好，请查看 https://meta.stackoverflow.com/editing-help 谢谢！ - Eric Aya

请勿仅发布代码。虽然您的解决方案可能有用，但您还应该解释为什么该代码可以解决问题。 - 4b0