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

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

假设重点是文本输入。单击div不应导致文本输入的焦点丢失

以下是基本设置：

html:

使用

单击

事件可以在单击时恢复焦点，但当鼠标按钮只按下时，焦点仍会丢失（而且之后将发生单击事件也不被授予）

这是一支钢笔：

---

我知道通过设置

tabindex=“-1”

，可以使元素不在选项卡上接收焦点。但这不适用于鼠标事件。

将此行添加到侦听器：

event.preventDefault();

---

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

太好了。这似乎奏效了。我猜按钮的样式必须通过javascript完成，因为像

：active

这样的css事件不起作用。好吧，如果你想要按钮样式，我可能建议你使用一个按钮来设置文本字段的焦点，而不是一个div，并使用一个标签，如果点击，它会自动设置输入的焦点，查看更新的代码笔：这不起作用。当鼠标按钮按在按钮上而没有松开时，焦点会丢失，将其从按钮上移开并释放到外部。我想让输入上的焦点独立于按钮的触摸方式。就像工具栏按钮在普通应用程序中工作一样。以编写器应用程序为例。如果焦点在文本上，则无论您如何触摸“粗体按钮”，文本都不会失去焦点。请尝试使用按钮上的

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

event.preventDefault();