Javascriptのキーバインディング「中断」または「ページフォーカスを失う」Chromeで広告が読み込まれた後

Question

ウェブページの矢印キーにキーイベントバインディングがあります。これらのバインディングはページが読み込まれると完全に動作しますが、ページのGoogle AdSense広告が読み込まれると突然動作を停止します。これはすべてのページ/広告の負荷ではなく、その約半分で発生します。

ページロード中に矢印キーを繰り返し押すと、広告が表示され、その時点でイベントが停止し、キーのデフォルトアクション（ページのスクロール）が開始されるまで、バインドされたイベントが正常に発生します。私がキーを押し続けている間に起こる。私は経由でこれらのキーのデフォルトの動作を無効にしているので、これは奇妙です：私はその後、ページ本体の任意の場所をクリックすると

window.onkeydown = function(e) { 
    // Spacebar, all four arrow keys 
    if (e.keyCode == 32 || e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || 
     e.keyCode == 40) { 
     e.preventDefault(); 
     return false; 
    } 
}; 

、キーバインディングは、再び作業を開始します。

広告の読み込みが終了したとき（ページの残りの部分以降）、おそらくページからスクロールするような割り込みが発生していると推測しています（スクロールしてから起こる？）。

実際のキーバインドは、マウストラップを使用して行われますが、問題とは関係ないようですが、Google Chromeでこの問題が発生しただけです。私はFirefoxでこの動作をしません。 ChromeでAdBlockを有効にすると、問題は発生せず、この「中断」を引き起こす広告がさらに表示されます。

このようにキーバインディングを完全に中断することができないことはわかりませんが、ユーザーが本文を再びクリックするまでキーをスクロールできるようにすることは可能ですか？広告がこのようにページとの対話性を妨害することを防ぐ方法はありますか？

Answer 1

AdSense ADS_LOADEDイベントをキャプチャすることをお勧めしますが、動画でGoogle IMA SDKを使用している場合にのみ表示されます。

私が思いついた解決策は、すべてのぼかしイベントを聴くことでした。広告によってドキュメント本文からフォーカスが奪われたときは、フォーカスをウィンドウに戻しました。これは、window.focus（）がタイムアウトでラップされている場合にのみ機能します。

isDescendant（）関数はthis answerから取得されました。

function isDescendant(child, parent) { 
    /* 
    Test if child is contained within parent regardless of how many levels deep 
    */ 
    var node = child.parentNode; 
    while (node != null) { 
     if (node == parent) { 
      return true; 
     } 
     node = node.parentNode; 
    } 
    return false; 
} 

window.addEventListener('blur', function() { 
    var ads = document.getElementsByClassName('ad'); 
    var n = ads.length; 
    for (i=0; i<n; i++) { 
     if (isDescendant(document.activeElement, ads[i])) { 
      // This only works if wrapped in a timeout (why?) 
      window.setTimeout(function() { 
       window.focus(); 
      }, 0); 
      break; 
     } 
    } 
});