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

Question

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

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

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

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

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

当您将光标放在 Quantity 2 输入框（第二个框）并单击 Enter 时，它会为 Quantity 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>

Answer 2

检查doClickMeButton 函数事件是鼠标事件，鼠标事件没有键盘绑定细节。
您可以在input 标签上绑定基于键盘的事件。 我已经提到了下面的代码，它的行为与您想要的相同。

function doClickMeButton() {
  alert("I am called");
}

function doMoreLess(_id) {
  alert("clicked on " + _id);
  return false;
}

function myFunction(event) {
  var x = event.which || event.keyCode;
  if (x === 13) {
    console.log(event.which, "which"), console.log(event.keyCode, "keycode");
    doClickMeButton();
  }
}

 <form>
 
         // first thing I dont know why you need this button
        <button id="my-button"
       
        onclick="">CLICK ME</button>
      
        <br>
        Enter something in the input textbox below, and hit the ENTER key and notice that:<br>
        &nbsp;&nbsp;(1) keyCode is undefined, and<br>
        &nbsp;&nbsp;(2) ENTER fires the onclick action of the first element with an onclick in it.
        <br>
      
        <button id="less" onclick="return doMoreLess(this.id);">
        less
        </button>
        <input type="text" size="10"  onkeypress="myFunction(event)">
        <button id="more" onclick="return doMoreLess(this.id);">
        more
        </button>
      </form>