enchant.js で矢印キーの keydown イベントが発生しない

2018年7月11日水曜日

enchant.js HTML5 javascript

t f B! P L
enchant.js 矢印キー

enchant.js で矢印キーの keydown イベントが発生しない

はじめに

タイトルの通り、矢印キー(↑↓←→)の keydown イベントを検知しようとした所、
enchant.js を使用すると、矢印キーの keydown が発生しない事が分かった。。。

具体的には、以下のようなコードでは、矢印キーの keydown イベントは起きない。

 document.onkeydown = function (e){
   // 矢印キーの場合、そもそもイベントが発生しない
   console.log("keydown=" + e.keyCode);
   if (e.keyCode == 37) { // keycode = 37 (左矢印キー)
   }
 };

代わりに、enchant.js の game オブジェクトの keydown イベントを
使用すると、イベント自体は発生するが、
何故か押されたキーコードが取れない。。。

 game.addEventListener("keydown", function(e) {
   console.log("keydown=" + e.keyCode);   // keydown=undefined
   if (e.keyCode == 37) { // keycode = 37 (左矢印キー)
     // 矢印キーの場合、そもそもイベントが発生しない
   }
 });

解決策

enchant.js のソースコードを改変する事で、イベントを検知出来るようにしました。

修正箇所は、1100行目あたりの部分です

  stage = enchant.Core.instance._element;
  var evt;
  document.addEventListener('keydown', function(e) {
      //core.dispatchEvent(new enchant.Event('keydown')); //これをコメントアウトして
      core.dispatchEvent(e); //これを追加
      if (enchant.ENV.PREVENT_DEFAULT_KEY_CODES.indexOf(e.keyCode) !== -1) {
          e.preventDefault();
          e.stopPropagation();
      }
  }, true);

これで、game オブジェクトの keydown イベントから、
押されたキーの keyCode が取得出来るようになります。

 game.addEventListener("keydown", function(e) {
   console.log("keydown=" + e.keyCode);   // keydown=37
   if (e.keyCode == 37) { // keycode = 37 (左矢印キー)
   }
 });

この修正で問題ないかは分からないが、とりあえず解決!!

スポンサーリンク

QooQ