H5 canvas接收键盘事件

Posted 2022-02-09 力为

html

Canvas接收事件的前提：Canvas得到焦点(Focus)

Canvas 获取焦点的前提：给Canvas设置了tableIndex。

window.onload = function() 

   let myCanvas = document.getElementById('canvas');
   myCanvas.tableIndex = 1;

   document.addEventListener('mousedown', function(event) 
      if(myCanvas  == event.target)
          myCanvas.focus();
   );
   
   myCanvas.addEventListener('keydown', function(event) 
         alert('This is keydown event.');
      
   );

WebAssembly

SDL2默认会捕获windows上的键盘事件，这不是我们想要的行为。可以这样设置一下，只响应canvas上的键盘消息：

SDL_SetHint(SDL_HINT_EMSCRIPTEN_KEYBOARD_ELEMENT, "#canvas");