Javascript 如何永久聚焦一个元素？

假设我有一个页面，其中按钮或输入字段是页面上最重要的元素。我知道当页面加载时，我可以使用

autofocus

属性自动聚焦元素：

<button autofocus>Hello!</button>

你好！

这就像广告宣传的一样，但不幸的是，如果用户单击页面的任何其他部分，HTML元素将失去焦点

如何永久聚焦HTML元素

（注意：如果确实需要使用JavaScript来完成此任务，请使用纯JavaScript[即不使用jQuery]来显示解决方案）

编辑：我正在制作一个个人应用程序，页面上只有一个按钮，没有其他按钮。焦点将允许我随时使用键盘快速“按下”按钮（例如按enter键）。

请参阅。我强烈建议不要在一般情况下这样做，但在控制良好的环境中，您的情况听起来非常特殊

您可以钩住按钮上的

blur

事件，并尝试再次对其进行聚焦：

document.querySelector（“按钮[自动对焦]”）.addEventListener（“模糊”，函数（）{
var t=这个；
t、 焦点（）；
setTimeout（function（）{//某些浏览器在
t、 focus（）；//模糊完成后
}, 100);
});
这是按钮
另一个按钮，这样我们就可以看到它的工作，如果我们的标签远离第一个。
我认为唯一的选择是像这样的JavaScript：


var-button=document.querySelector（'button'）；
document.addEventListener（'click'，函数（e）{
如果（！e.target.matches（'按钮[自动对焦]'））{
按钮。焦点（）；
}
})
focus
注意评论中的警告

document.getElementById('stayHere').addEventListener('blur', function() {
    this.focus();
});

在某种程度上，您可以通过CSS实现这一点，还可以：

body {
    pointer-events: none;
}
.greedy-button {
    pointer-events: auto;
}

“如果用户单击页面的任何其他部分，该元素将失去焦点”Good.：-）浏览器是用户的代理，而不是您的代理。如果他们想把焦点放在页面的另一部分，就让他们来吧。我强烈建议不要干涉用户的焦点操作，无论是从哲学角度还是从实用角度（焦点战争很快就会在跨浏览器时变得丑陋）。你基本上会使页面的其余部分无法访问。这似乎不是一个好的用户体验策略。每个人都有一个用例。Flux可能正在构建一个游戏，需要一个元素在我们所知的整个时间内保持焦点。@T.J.Crowder这实际上是一个个人应用程序，页面上只有一个按钮，其他什么都没有。Focus有助于使用键盘快速按下按钮（例如使用enter键）。@JonUleis-这正是我发布答案的原因。：-）按
选项卡
将焦点移出按钮，而不触发
单击
@T.J.Crowder yea，您的解决方案更好，我的第一次尝试是模糊，但使用
e.preventDefault（）
但它不起作用，所以我认为模糊在按钮上不起作用。啊，是的。他们不允许你阻止注意力转移。（在一些浏览器上，
blur
只在它发生后才触发，IIRC…）这就是我写的这篇文章，我在blur上使用了prevent default，所以我创建了click解决方案。你的担心是正确的，但正如我所说的，我将是预期应用程序的唯一用户，而应用程序将只包含一个按钮（是的，只有一个按钮，其他什么都没有）。@Flux-足够公平！：-）在问题（接近结尾）中提供这种上下文通常很有帮助，这样人们就知道问题的范围。