根据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的例子,但也不起作用。
1条答案
按热度按时间t8e9dugd1#
只有当用户关注按键时,您想要访问按键时,这才可能起作用。
这将仅在
button
上创建一个事件侦听器,并且只有在激发keydown事件并按下字母k时,该事件侦听器才会触发方法playPause
。这将为
document
添加一个事件监听器,记住按键事件是冒泡的。事件监听器将在DOM中的任何位置触发任何按键,而不管按钮是否被聚焦。该监听器将在特定按钮的附加控制器上触发playPause
方法。虽然这看起来可能有点违反直觉,但它实际上非常强大,让你对行为有很大的控制权。
关键是
data-action
在具有data属性的元素上基本上等同于addEventListener
。有些事件从它们的目标冒泡,有些则不会。但是事件永远不会冒泡到DOM树的一部分,所以如果你想要不在data-action
元素内的事件,你需要监听文档或窗口(又名全局事件监听器)。https://stimulus.hotwired.dev/reference/actions#global-events