自定义按钮可将焦点移到单击上，而不是输入Enter上

Question

Whats the best approach to remove focus from a button on mouse click but not when the Enter key is pressed using Javascript? I am using the blur() method on the click event but that doesn't work.

Please note that I cannot use outline: none or outline: 0 for accessibility reasons. For more info refer to: 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 solution

 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>