刺激键盘事件似乎不起作用

Question

根据刺激操作的参考表，您可以按照此处所述定义键盘事件描述符

因此，我有一个转到 video_container 控制器的按钮：

%button{type: "Button", data: {action: "keydown.k->video-container#playPause",
 video: {container: {target: "playButton"}} Play

在我的控制器中：

playPause() {
  alert("This event is working")
}

我将此用于点击事件：

%button{type: "Button", data: {action: "click->video-container#playPause",
 video: {container: {target: "playButton"}} Play

但它不适用于 keydown 或 keyup 事件。我什至添加了 :prevent 选项来调用 PreventDefault() 但这也不起作用。

我错过了什么？

编辑更新

这里进一步修补。我发现我可以让回车键事件做一些事情：

%button{type: "Button", data: {action: "keydown.enter->video-container#playPause",
 video: {container: {target: "playButton"}} Play

但其他的都不起作用。使用空格使文档向下移动。

我什至尝试了他们的复合修饰符 ctrl+a 的示例，但这也不起作用。

Answer 1

仅当您想在用户专注于按钮时访问按键时，这才可能起作用。

<button type="button" data-action="keydown.k->video-container#playPause">play</button>

这将仅创建一个事件侦听器button，并且playPause仅当触发 keydown 事件并按下字母 k 时，该事件侦听器才会触发该方法。

<button type="button" data-action="keydown.k@document->video-container#playPause">play</button>

这将添加一个事件侦听器document，请记住按键事件会冒泡。事件侦听器将在 DOM 中任何位置的任何按键上触发，无论按钮是否获得焦点。不过，该侦听器将触发playPause该特定按钮的附加控制器上的方法。

虽然这看起来有点违反直觉，但它实际上非常强大，可以让您对行为进行大量控制。

一个关键要点是，它data-action基本上等同于addEventListener具有 data 属性的元素。有些事件从目标中冒出，有些则不然。但是事件永远不会冒泡到 DOM 树的一部分，因此如果您想要不在元素内部的事件，data-action您需要在文档或窗口上监听（也称为全局事件监听器）。

https://stimulus.hotwired.dev/reference/actions#global-events