点击带Font Awesome图标的提交按钮时无法获取按钮name与value如何解决

• 浏览器兼容性限制：event.submitter为HTML5新增属性，仅Chrome 81+、Firefox 75+、Safari 15.4及以上版本原生支持，低版本浏览器点击按钮内部的<i>图标元素时，无法正确将submitter指向外层的提交按钮，导致属性读取为空。
• 代码执行顺序错误：现有逻辑先给提交按钮设置disabled禁用状态，再读取name、value属性，部分浏览器会屏蔽禁用状态下表单元素的属性读取，也会触发取值失败问题。

方案1：CSS拦截图标点击（最简实现） #

给提交按钮内部的所有子元素设置不响应鼠标事件，点击图标等同于直接点击按钮本体，从根源避免submitter识别偏差：

button[type="submit"] * {
  pointer-events: none;
}

方案2：JS逻辑优化+兼容兜底 #

调整属性读取和禁用的执行顺序，同时添加兜底查找逻辑，兼容不支持event.submitter的低版本浏览器：

function handleSubmit(event) {
  // 优先取原生submitter
  let submitBtn = event.submitter;
  // 兜底：从点击目标向上查找最近的提交按钮
  if (!submitBtn || submitBtn.type !== 'submit') {
    submitBtn = event.target.closest('button[type="submit"]');
  }
  // 先读取属性
  let name = submitBtn.name;
  console.log("name" + name);
  let id = submitBtn.value;
  console.log("id " + id);
  // 最后再禁用按钮
  submitBtn.setAttribute('disabled', 'disabled');
}

两种方案可同时使用，覆盖全场景兼容需求。

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