Chromium中img标签disabled属性无法禁用onClick事件问题求助

img元素并非表单控件，HTML规范里并没有为它定义disabled属性，所以添加这个属性不会触发原生的禁用行为。你提到的Chromium在2022年12月后的行为变化，本质是浏览器对HTML规范的执行更严格，不再兼容这种非标准用法。

要实现图片点击禁用，可采用以下几种方法：

方法1：移除或解绑点击事件 #

如果不需要保留视觉禁用标记，直接移除点击事件即可：

• 针对内联事件，可直接设置onclick=null：

  document.querySelector('img').onclick = null;
  

• 若使用事件监听绑定，调用removeEventListener解绑：

  function handleClick() {
    alert('TEST');
  }
  // 绑定事件
  document.querySelector('img').addEventListener('click', handleClick);
  // 禁用时解绑
  document.querySelector('img').removeEventListener('click', handleClick);
  

方法2：用CSS阻止鼠标事件 #

通过pointer-events: none完全阻止图片接收鼠标点击事件，同时可添加透明度变化标记禁用状态：

.img-disabled {
  pointer-events: none;
  opacity: 0.6; /* 视觉区分禁用状态 */
  cursor: not-allowed;
}

对应的HTML：

<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" onClick="alert('TEST')" class="img-disabled">

方法3：用button元素包裹图片 #

利用button原生支持的disabled属性，将图片放在button内部，通过禁用button间接禁用图片点击：

<button disabled class="img-btn">
  <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" onClick="alert('TEST')">
</button>

添加CSS去掉button默认样式，让它和普通图片外观一致：

.img-btn {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.img-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

内容的提问来源于stack exchange，提问作者ZeroHero