ビデオにフォーカスを入れて、不要なスペースバーのスクロールを無効にします。

Question

ビデオプレーヤーでは、常にスペースバーを一時停止します。これは起こっていない。

問題 - 最初にクリックしないと、ページが予期せず動作します。ビデオを一時停止する代わりに、スペースバーはページを下にスクロールします。

解決方法 - ビデオプレーヤーをクリックすると、ビデオプレーヤーに関連付けられた多くのdivの1つに表示プロパティがnoneからblockに変更されています。私は、このページが正しく

if(videoPlayer.style.display === "none"){ 
    videoPlayer.style.display = "block" 
} 

それはクラスは変わりますが、ページの動作を変更しない振る舞いをするだろうかどうかを確認するために、これを追加しました。これは、ビデオを切り替える可能性のある暗闇の中の単なるショットであり、動作しません。

ページをクリックしたときにどのプロパティが変更されているかを確認するにはどうすればよいですか？ 私は、何をフォーカスしているのか把握することができます。 そして、ビデオにフォーカスを当ててページの読み込みを行うために何かを書くことができます（ブラウザの拡張機能を使用していると思いますか？）、あるいは単なる普通how to do I solve this problemです。

Answer 1

まず、ページをクリックすると何が起きているのかを確認するには、ブラウザの開発者ツールを使用します。

例：クロムのページで右クリック> [検査]>上部の要素タブにあることを確認します。

次に、開発ツール（またはCtrl + Shift + C）の左上にある「ページ内の要素を選択」ツールを使用して、onclickプロパティを表示するページ上の要素を選択します。

devツールでは、右下にある「Event Listeners」というタブが表示されます。その要素をクリックすると、その要素がユーザーから何を返答しているのかを確認できます。おそらく「クリック」と呼ばれるものがあるでしょう。詳細を見るにはこれをクリックしてください。

第二

---

、あなただけの次を使用し、ページをスクロールからスペースバーを停止する場合：

document.onkeydown = function(e){ 
    if(e.key == " " && e.target == document.body){ 
    e.preventDefault; 
    //Spacebar pressed 
    //Place function here to pause the video 
    } 
} 

ここe.preventDefaultがスクロールからページを停止するラインです。