点击＜button＞按钮会让浏览器将焦点放在其上引发键盘回车触发click事件

背景： button上绑定点击事件，当点击button后，按键盘回车，会触发绑定的点击事件，按住回车键不放，会不断触发点击事件。
点击和焦点： 点击 会让浏览器和操作系统（默认情况下）将焦点放在其上。 的 type=“button” 和 type=“submit” 也是一样的。
例子：

<button
    type="button"
    value="button-button"
    onclick="clickButtonButton(event)"
  >button</button>
 <input
    type="button"
    value="input-button"
    onclick="clickInputButton(event)"
  />
 <input
    type="submit"
    value="input-submit"
    onclick="clickInputSubmit(event)"
  />

function clickButtonButton(e) {
  console.log(e)
}

function clickInputButton(e) {
  console.log(e)
}

function clickInputSubmit(e) {
  console.log(e)
}

点击button后，按住enter键，控制台不停的打印event事件，点击页面其他地方后，再按enter无用
解决方法

1. 鼠标点击页面元素后主动失去焦点

function clickButtonButton(e) {
  console.log(e);
  e.target.blur();
}

function clickInputButton(e) {
  console.log(e)
  e.target.blur();
}

function clickInputSubmit(e) {
  console.log(e)
  e.target.blur();
}

2. 监听键盘，阻止默认行为：e.preventDefault();

document.addEventListener('keypress', (e) => {
  e.preventDefault()
})

document.addEventListener('keydown', (e) => {
  e.preventDefault()
})

3. 将enter键禁掉

document.onkeydown = function (e) {
  var ev = (typeof event != 'undefined') ? window.event : e
  if (ev.keyCode == 13) {
    return false
  }
}

4. 节流

let isFlag = true;

function clickButtonButton(e) {
  if (isFlag) {
    isFlag = false;
    let timer = setTimeout(() => {
      console.log('setTimeout');
      isFlag = true;
      clearTimeout(timer);
    }, 1000)
  }
}

总结： 防止多次调用click事件，根据项目具体场景去做调整，个人观点，纯属参考。

1. 表单提交，如果页面中有校验，提交后跳转其他页面，可用第四种；
2. 切换某个模块的显示与隐藏，可以使用第一种，点击后失去焦点；
3. 单纯的查询数据，用第四种

删除button默认样式：outline： 0;（button, input, select, textarea）