慎用keyup事件

提醒:本文最后更新于 5722 天前,文中所描述的信息可能已发生改变,请谨慎使用。

手册上对onkeydown的描述为“Fires when the user presses a key”,onkeyup的描述为“Fires when the user releases a key”,onkeypress的描述为”Fires when the user presses an alphanumeric key”,一个是键盘按键按下时触发,一个是按键弹起时触发,另一个是按下键盘的数字、字符键触发。为什么说要慎用keyup呢?

设想有这么一种情况,在web页面上有一个模拟的弹出窗口,很流行的那种,然后我们监听keyup事件,如果发现keyCode等于27,也就是说用户按了ESC键的时候隐藏窗口,这样能方便一部分高级用户,Google文档也这么做。但是如果弹出窗口中有一个输入框,情况就不那么妙了。因为我们通常用的输入法都有一个候选词的浮动窗口,有时候打错字了需要关闭这个浮动框口也会用到ESC,这个时候你会发现一旦按下ESC,输入法的候选词窗口连同那个弹出层一起消失了。

实际上,这个问题很好解决,我们只要把keyup换成keydown、keypress中的任何一个就可以了,在有候选词窗口出现的情况下按ESC是不会触发keydown/keypress事件的。这种错误监听事件的现象不仅仅在web上才有。以前的baidu hi在 选择表情时,鼠标在同一个表情上来回晃动,预览区的图片会一直跳动,这个很神奇的bug就是因为hi错误地监听了每个表情的mousemove事件,导致鼠标一移动,预览区图片就重新加载,如果图片是gif格式的就始终在前几帧播放,所以看上去好像在跳动。另外以前在ubuntu下用过一个第三方的msn客户端,这个客户端在聊天窗口中按ESC会关闭当前聊天窗口,这没什么,官方的msn也是这样,但是郁闷的是在有候选词窗口的时候按ESC,聊天窗口一样会关闭,而且再次打开 之前辛辛苦苦敲进去的内容全没了,这种bug让人很无奈。

keydown,keyup,keypress在有输入法窗口时对ESC处理的差异

本文链接:https://imququ.com/post/keydown-keyup-keypress.html参与评论 »

--EOF--

提醒:本文最后更新于 5722 天前,文中所描述的信息可能已发生改变,请谨慎使用。

Comments