当前位置: 首页 > Web前端 > HTML5

javascriptkeydown事件总结

时间:2023-04-05 10:50:13 HTML5

最近在开发过程中遇到了一个问题,感觉可以通过监听keydown事件来解决。但是,在实践的过程中,我发现我原来对keydown事件的理解并不是很正确。所以,在详细了解了keydown事件之后,这里做一个总结。这篇文章主要包括以下几个方面:遇到的问题keydown事件的解决方案遇到的问题在开发过程中遇到这样一个需求:当鼠标悬停在目标dom上时,鼠标需要设置一个特殊的样式:如ctrl键未按下,鼠标样式设置为样式1;如果按下ctrl键,则鼠标样式设置为样式2。我的第一个想法是通过监听mousemove事件来确定鼠标是否悬停在目标dom上。然后用event.ctrlKey判断此时ctrl键是否按下:如果没有按下,则处理上述情况1;如果按下,则处理上述情况2。但是,仅仅监听mousemove事件并不能涵盖所有情况。比如先将鼠标移动到目标dom上,此时鼠标不动,按下或松开ctrl键,此时需要改变鼠标的样式。但是,我们在按下或释放ctrl键后并没有移动鼠标,因此不会触发mousemove事件。因此,我想通过keydown和keyup事件来监听ctrl键的按下和释放事件。首先,我向目标dom添加了一个keydown事件。这时候问题来了:根本没有触发keydown事件。然后,我想尝试在body上绑定keydown事件,然后通过判断event.target是否为目标dom来判断鼠标位置。最后发现event.target是body元素,并不是我想要的targetdom。于是,我开始查资料,发现keydown事件和想象中的不一样。keydown事件在查阅了MDN上的keydown事件后,我发现该事件有以下限制:键盘事件只能由