自定义按钮会在点击时删除焦点，但不会在输入按键

Question

什么是在鼠标点击时从按钮移除焦点的最佳方法，但是在使用Javascript按下Enter键时却没有？我在blur()事件中使用click方法，但这不起作用。

请注意，出于辅助功能原因，我无法使用outline: none或outline: 0。有关详细信息，请参阅：http://www.outlinenone.com/

var button = document.getElementById("btn");
button.addEventListener("click", removeFocus);

function removeFocus(event) {
	event.target.blur();
}

button {
  display: inline-block;
  border: none;
  height: 36px;
  line-height:36px;
  padding: 0 12px;
  background: cyan;
}

<button id="btn">
  Hello
</button>

Answer 1

Javascript解决方案

var button = document.getElementById("btn");
button.addEventListener("click", clickEvent);
button.addEventListener("keypress", clickEvent);
function clickEvent(event){
  if (event.keyCode == 13) {
    event.preventDefault();
  } else {
    button.blur();
  }
}

button {
  display: inline-block;
  border: none;
  height: 36px;
  line-height:36px;
  padding: 0 12px;
  background: cyan;
}

<button id="btn">
  Hello
</button>