为什么当我按 ENTER 键时会触发表单中第一个按钮的 onclick（并且事件中没有 keyCode）？

Question

为什么当我按 ENTER 键时会触发表单中第一个按钮的 onclick？我试图找出为什么 onclick 是由 ENTER 键触发的，然后如果是实际的鼠标/点击按钮单击，则让该函数继续执行，或者如果是 ENTER 键，则让该函数忽略按键。

我尝试检查 event.keyCode （传递到 javascript 函数），但它是未定义的。

事实上，似乎设置的唯一属性是 event.isTrusted，但不存在其他属性。

编辑：创建了新的演示代码以更好地解释我遇到的问题......

这是解决问题的js：https ://jsfiddle.net/Ld142qx3/24/

当您将光标放在“数量 2”输入框（第二个框）中并单击 Enter 时，它会触发“数量 1”输入框前面的第一个“LESS”按钮的 onclick 事件。

没有随事件传入的 keyCode 属性来标识 onclick 实际上是通过鼠标点击触发还是通过 ENTER 键触发。

我原来的测试代码HTML是：

<form onsubmit="return false;">
  Quantity 1: <button id="b1-less" onclick="return b1Less(this.id, event);">less</button>
  <input type="text" id="q1" value="10" size="10">
  <button id="b1-more" onclick="return b1More(this.id, event);">more</button>
  <br>
  Quantity 2: <button id="b2-less" onclick="return b2Less(this.id, event);">less</button>
  <input type="text" id="q2" value="5" size="10">
  <button id="b2-more" onclick="return b2More(this.id, event);">more</button>
</form>

我原来的 JavaScript 是这样的：

function b1Less(_id, _event) {
  alert(_event.keyCode);
  _val = parseInt(document.getElementById('q1').value);
  _val = _val - 1;
  document.getElementById('q1').value = _val;
  return false;
}
function b1More(_id, _event) {
  _val = parseInt(document.getElementById('q1').value);
  _val = _val + 1;
  document.getElementById('q1').value = _val;
  return false;
}

function b2Less(_id, _event) {
  _val = parseInt(document.getElementById('q2').value);
  _val = _val - 1;
  document.getElementById('q2').value = _val;
  return false;
}
function b2More(_id, _event) {
  _val = parseInt(document.getElementById('q2').value);
  _val = _val + 1;
  document.getElementById('q2').value = _val;
  return false;
}

Answer 1

您的问题是，表单内按钮的类型默认为按钮"submit"（请参阅规范），并且当隐式提交表单时（当您按下ENTER输入字段时发生这种情况，"submit"表单中的第一个按钮也有其onclick事件处理程序已触发（请参阅规范）。更改按钮以type="button"解决问题：

function b1Less(_id, _event) {
  _val = parseInt(document.getElementById('q1').value);
  _val = _val - 1;
  document.getElementById('q1').value = _val;
  return false;
}

function b1More(_id, _event) {
  _val = parseInt(document.getElementById('q1').value);
  _val = _val + 1;
  document.getElementById('q1').value = _val;
  return false;
}

function b2Less(_id, _event) {
  _val = parseInt(document.getElementById('q2').value);
  _val = _val - 1;
  document.getElementById('q2').value = _val;
  return false;
}

function b2More(_id, _event) {
  _val = parseInt(document.getElementById('q2').value);
  _val = _val + 1;
  document.getElementById('q2').value = _val;
  return false;
}

<form onsubmit="return false;">
  Quantity 1: <button type="button" id="b1-less" onclick="return b1Less(this.id, event);">less</button>
  <input type="text" id="q1" value="10" size="10">
  <button type="button" id="b1-more" onclick="return b1More(this.id, event);">more</button>
  <br> Quantity 2: <button type="button" id="b2-less" onclick="return b2Less(this.id, event);">less</button>
  <input type="text" id="q2" value="5" size="10">
  <button type="button" id="b2-more" onclick="return b2More(this.id, event);">more</button>
</form>