如何判断keydown是否会导致按键事件,在这种情况下会忽略它？

Question

我对javascript中的关键事件不是很满意.我需要捕获两个字母用于写入(我正在写文本<canvas>)和功能键(转义)用于其他命令.

在Firefox中它可以工作,因为Firefox会keypress为任何密钥触发事件.这很舒服,但规格直接允许它:

如果用户代理支持,当按下某个键时,必须调度此事件,当且仅当该键通常产生字符值时.

我不同意该规范,因为我认为没有理由.但就像现在一样,我无能为力.

问题是Google Chrome遵循该规范,并且不会触发keypress功能键.但是,它确实会对keydown所有按键点火.

我的程序只有一个键事件处理程序.它期望事件包含keyCode(物理键的ID和可选 charCode的等效字符值(对于有意义的键).

keydown事件在两个浏览器中都不包含任何字符值!它只包含keyCode.因此,如果您定义一个Ctrl+ Z组合并监听keydown事件,那么对于具有QWERTZ布局的用户,您的程序将被破坏 - 因为密钥(keyCode)的物理位置仍然相同.

如果你听两个keydown和keypress,性格事件将触发两次(怎么一回事,因为字符首先火灾keydown,然后keypress用适当的charCode属性)

我需要的？

基于以上所述,我需要忽略keydown将导致的键的事件keypress.这样做,我将能够捕捉到Esc在keydown和字符keypress.

我怎么可能这样做？

相关代码:

  //Keypress for character codes
  div.addEventListener("keypress", function(event) {
    console.log(event);      
    if(_this.editor.event(event)) {
      console.log("Event canceled.");
      event.preventDefault();
      event.cancelBubble = true;
      return false;  
    }
    return true;  
  });
  //Keydown for Esc and the likes
  div.addEventListener("keydown", function(event) {
    //Character events are handled by keypress
    if(event.charCode!=0)  //Does NOT work - in keydown, charCode is ALLWAYS 0
      return true;    

    console.log(event);      
    if(_this.editor.event(event)) {
      console.log("Event canceled.");
      event.preventDefault();
      event.cancelBubble = true;
      return false;  
    }
    return true;
  });   

互动的例子

我想我花了很多时间制作JSFiddles并没有真正增加获得答案的几率,所以我改为上传了实际的项目.

单击Firefox中的白色方块,按T,键入文本,按Esc,按Esc.几秒钟后Esc,光标应恢复正常.尝试绘制并按Ctrl+ Z.

在Google Chrome中重复此过程.Escape不起作用,因为它不会触发keypress.出于某种原因,Ctrl+ 26 Z事件的火灾事件keyCode.

来自聊天和评论:

@someDoge创造了一个我已经扩展的小提琴,现在很好地展示了这种情况.如您所见,您可以知道键不是字符,而是在按键中忽略它.但你不能知道这tab不是字符并取消它keydown(除非你在注释中有@someDoge sugest的固定数组的键码值).

Answer 1

您需要侦听keyup事件而不是keydown，这样您就不会生成两个单独的事件。

然后，您可以使用相同的处理函数处理 2 种事件类型，该函数将获取 charCode 或不获取 charCode，具体取决于特定键是否生成“按键”事件。只要您防止冒泡，您的处理程序就只会被调用一次。

关于 Chrome CTRL+Z 问题：我不知道如果按下控制键如何获得 charCode，因为它似乎只是生成一个 keyup 事件。