时间戳

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

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

问题描述

为什么当我按下 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;
}

标签： javascripthtml

解决方案

您的问题是表单内的按钮类型默认为"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>

推荐阅读