ruby-on-rails 刺激键盘事件似乎不起作用

k10s72fa  于 2023-03-20  发布在  Ruby
关注(0)|答案(1)|浏览(127)

根据Stimulus操作的参考表,您可以定义键盘事件描述符,如here所述
因此,我有一个按钮指向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的例子,但也不起作用。

t8e9dugd

t8e9dugd1#

只有当用户关注按键时,您想要访问按键时,这才可能起作用。

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

这将仅在button上创建一个事件侦听器,并且只有在激发keydown事件并按下字母k时,该事件侦听器才会触发方法playPause

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

这将为document添加一个事件监听器,记住按键事件是冒泡的。事件监听器将在DOM中的任何位置触发任何按键,而不管按钮是否被聚焦。该监听器将在特定按钮的附加控制器上触发playPause方法。
虽然这看起来可能有点违反直觉,但它实际上非常强大,让你对行为有很大的控制权。
关键是data-action在具有data属性的元素上基本上等同于addEventListener。有些事件从它们的目标冒泡,有些则不会。但是事件永远不会冒泡到DOM树的一部分,所以如果你想要不在data-action元素内的事件,你需要监听文档或窗口(又名全局事件监听器)。
https://stimulus.hotwired.dev/reference/actions#global-events

相关问题