javascript - 为什么当我按 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" 按钮(请参阅 spec )，并且当隐式提交表单时(当您按在输入字段中的 ENTER 中，表单中的第一个 "submit" 按钮也会触发其 onclick 事件处理程序(请参阅 spec ) .将按钮更改为 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>