如何检测由 Enter 按键触发的浏览器中的鼠标点击？答案

【问题标题】：How to detect the mouse click from browser triggered by Enter key press?如何检测由 Enter 按键触发的浏览器中的鼠标点击？
【发布时间】：2021-01-22 14:45:58
【问题描述】：

我注意到在 Chrome 等现代浏览器上，当在表单元素中放置一个文本字段和一个按钮时。如果在文本字段中按下回车键，按钮将被浏览器发出的鼠标点击事件点击。

由于表单中的唯一按钮不用于提交表单，有没有办法让该按钮只接受用户点击而不是浏览器点击？

<form action="javascript:void(0)">
  <input type="text"/>
  <button id="btn">Submit</button>
</form>

var btn = document.getElementById("btn");
btn.onclick = function() {
  alert("button clicked");
}

https://codepen.io/stevenz1987/pen/poEBmqv

【问题讨论】：

标签： javascript html

【解决方案1】：

您需要将“type”属性分配给“button”元素。如下：

var btn = document.getElementById("btn");
btn.onclick = function(e) {
  e.preventDefault();
  debugger;
  alert(123);
}

<form action="javascript:void(0)">
  <input type="text"/>
<button type="button" id="btn">Submit</button>
  </form>

【讨论】：

或者使用<input type="button" id="btn" value="submit">

【解决方案2】：

这不会发生，因为它是表单中的 only 按钮，而是因为它是一个 submit 按钮。

<button> elements default to type="submit" when associated with a form.

要禁用该行为，请将type 属性手动设置为button：

<button id="btn" type="button">Submit</button>

Try it on CodePen

【讨论】：

感谢您的回复。这是一个很好的学习。