Javascript 如何始终将焦点放在画布上？

我一直在这个论坛上寻找解决方案，但还没有找到。我需要始终将焦点放在画布元素上，无论我在页面上单击什么位置。我有几个按钮，在每个onclick事件中我写到：

document.getElementById('canvas').focus();

这确实奏效，但我认为这不是最好的做法。有什么想法吗？

这个怎么样（使用jQuery）：

这样做的目的是在它每次失去焦点（模糊）时，都将其重新聚焦

我在这里举了一个例子（一个基本相同的文本框）：

---

默认情况下，画布元素不可聚焦。您需要首先为它设置一个

tabIndex

例子

document.querySelector（“canvas”）.onblur=function（）{
var me=这个；
me.style.background=“红色”；
setTimeout（函数（）{
me.style.background=“透明”；
我。集中精力（）；
}, 500);
}

canvas{border:1px solid#000}

单击画布，然后单击外部-将抛出一个模糊事件，将背景染成红色半秒钟：

使用jQuery，您可以使用

trigger（）

---

阅读关于onblur事件的内容我尝试过在画布上使用onblur事件，但似乎只对输入元素起作用。您能详细介绍一下为什么需要将焦点放在画布上吗？是为了捕捉鼠标移动、按键吗？不，我正在编写一个html5俄罗斯方块游戏，我有一些按钮来控制游戏的播放/暂停，还有一些按钮来控制声音和音乐，当我点击这些按钮时，我失去了对画布元素的关注，这一事实使得奇怪的事情发生在行为上。但是，如上所述，在每个onclick事件上调用focus方法，一切都会很好。但这似乎是一个丑陋的解决方案。我在下面的回答中概述了一种方法。只需先点击激活演示窗口，所有按键等就会被重定向到canvas元素。或者，为canvas元素设置一个tabindex（我还包括一个链接来演示这一点）。你应该尝试使用实际的canvas元素哇，你是对的，它不起作用。。。Canvas显然没有onblur。。。我应该在画布上测试一下。。。很抱歉是的……我也尝试过jquery，但没有任何结果。感谢您的尝试Martin.@MartinE.Zulliger我确实有一个onblur，您只需要先为元素设置tabIndex（我知道，这有点微妙：）@MartinE.Zulliger是的，但是您需要在设置焦点（）之前给它一个小的超时时间（我在回答中添加了一个示例，不过为了演示起见是500毫秒）。不正确，画布也有模糊，但需要先为其设置tabIndex@KenFyrstenberg您是对的，将编辑我的答案，谢谢您提供的信息。

$('#canvas').focus().blur(function() {
    $('#canvas').focus();
});

$("#canvas").trigger("click");