onmousemoveイベントが2回発生する

javascriptを使用してカスタムビデオプレーヤーを作成しようとしていますが、コードはonmousemoveイベントのオーバーレイを表示する必要がありますが、何らかの理由で2回、お互いの上に私は正確な理由を把握することはできません。onmousemoveイベントが2回発生する

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Video Player</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script> 
<style> 
    video { object-fit: fill; } 

    #video-player { 
     position: fixed; 
     top: 0; 
     left: 0; 
     bottom: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     z-index: -1; 
    } 
    #overlay 
    { 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     position:fixed; 
     background-color: rgba(0,0,0,0.4); 
     width: 100%; 
     height: 100%; 
     display: none; 
    } 
    #toggle 
    { 
     top: 50%; 
     left: 50%; 
    } 
</style> 
</head> 
<body style="cursor: none"> 
    <video id="video-player" width="100%" height="100%" controls> 
    <source src="/Users/Himanshu/Downloads/movie.mp4" type="video/mp4"> 
    </video> 
    <div id="overlay"> 
     <button id="toggle">play</button> 
    </div> 
    <script src="mediaPlayer.js" type="text/javascript"></script> 
</body> 
</html>

とJavascriptのコードを次のように

それのためのHTMLコードはあるも、私はカーソルを非表示にしない方法

var videoPlayer=document.getElementById("video-player"); 
var toggleButton=document.getElementById("toggle"); 
videoPlayer.controls=false; 
toggleButton.addEventListener("click",function(){ 
if(videoPlayer.paused) 
    { 
     toggleButton.innerHTML="pause"; 
     videoPlayer.play(); 
    } 
else 
    { 
     toggleButton.innerHTML="play"; 
     videoPlayer.pause(); 
    } 
}); 
videoPlayer.onended=function(){ 
toggleButton.innerHTML="play"; 
}; 
var isHidden=true; 
window.onmousemove=function(){ 
    if(isHidden) 
    { 
     console.log("Mouse Move Registered right now"); 
     isHidden=false; 
     document.body.style.cursor="default"; 
     document.getElementById("overlay").style.display="inline"; 
     setTimeout(hide,1000); 
    } 
}; 
var hide=function(){ 
    console.log("here"); 
    document.getElementById("overlay").style.display="none"; 
    document.body.style.cursor="none"; 
    isHidden=true; 
};

を以下のようです。

出典

2017-11-01 sudojdoe

カーソルを非表示にするには（ 'div'-' cursor：none'ですべてのコンテンツをラップし、 'body'を使用しないでください）、どのように再生/一時停止制御に到達できますか？ – dhilt

mousemoveまたはresizeイベントがトリガーされる頻度は、主にブラウザの実装によって異なります。関数が繰り返し呼び出されることがあります。このため、多くの図書館ではこのような場合に「デバウンス」機能を使用しています。

デビッドウォルシュの記事JavaScript Debounce Functionsを読むことをお勧めします。また、Underscore.jsの関数例も含まれています。そのイベントがwaitミリ秒間もうトリガされなくなるまで

// Returns a function, that, as long as it continues to be invoked, will not 
// be triggered. The function will be called after it stops being called for 
// N milliseconds. If `immediate` is passed, trigger the function on the 
// leading edge, instead of the trailing. 
function debounce(func, wait, immediate)

その関数のimmediateフラグが、ではなく、再び、一瞬でイベントが最初にトリガされ、与えられたイベントハンドラが一度呼び出されます。

出典

2017-11-01 23:25:51 feeela

私はオーバーレイが消えてから500ミリ秒待って問題を解決しましたが、本当に興味深いですが参考に感謝します。 – sudojdoe

onmousemoveイベントが2回発生する

答えて

関連する問題