使 div 无法获得焦点（如工具栏按钮）

Question

有没有办法让div无法获得焦点？这是工具栏按钮的正常行为。

假设焦点在文本输入上。单击 div 不应使文本输入的焦点丢失。

这是一个基本设置：

html:

<div id="toolbar-button">
    Button
</div>
<input id="input">

我试图重新关注 div 的 mousedown 事件，但确实如此 es 不工作：

document.getElementById('toolbar-button').addEventListener('mousedown', function(event) {
    document.getElementById('input').focus();
})

使用 click 事件重新获得点击的焦点，但当鼠标按钮仅按下时焦点仍然丢失（并且点击事件之后会发生不被允许）。

这是一支笔：

http://codepen.io/anon/pen/oxjPva

我知道可以通过设置 tabindex = "-1" 使元素不在选项卡上获得焦点。但这对鼠标事件不起作用。

Answer 1

将此行添加到您的侦听器：

event.preventDefault();

它将防止焦点设置在按钮上，这是按下按钮时的默认操作。