Firefox中无法禁用type="image"类型input元素问题求助

问题原因 #

Firefox对<input type="image">的disabled属性存在兼容性差异——这类控件本质是图片提交按钮，Firefox默认不会像普通按钮那样完全阻断它的交互行为，导致设置disabled后仍能触发点击事件。

可行解决方法 #

方法1：替换为type="button"并模拟样式（推荐） #

直接将按钮类型改为type="button"，通过CSS设置背景图实现图片按钮效果，这种方式在所有浏览器中禁用逻辑一致：

<input type="button" class="mapIcon" id="mapIcon" onclick="openMap()" disabled>

配套CSS：

.mapIcon {
  border: none;
  background: url('mapIcon.png') no-repeat center / contain;
  width:  /* 图片实际宽度 */;
  height: /* 图片实际高度 */;
  cursor: pointer;
}
.mapIcon:disabled {
  cursor: not-allowed;
  opacity: 0.6; /* 禁用状态的视觉提示 */
}

方法2：保留type="image"，补充禁用逻辑 #

如果必须使用type="image"，通过CSS+JS双重限制交互：

1. 添加CSS阻止点击事件：

.mapIcon:disabled {
  pointer-events: none;
  opacity: 0.6;
}

2. 修改onclick事件，提前判断禁用状态：

<input type="image" src="mapIcon.png" alt="mapIcon" class="mapIcon" id="mapIcon" onclick="if(this.disabled) return; openMap()" disabled>

方法3：用<button>标签包裹图片 #

使用<button>标签承载图片，这类控件的disabled属性在各浏览器中兼容性更好：

<button class="mapIcon" id="mapIcon" onclick="openMap()" disabled>
  <img src="mapIcon.png" alt="mapIcon">
</button>

配套CSS清除按钮默认样式：

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

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