Javascript onmousemove事件发生两次
我正在尝试使用javascript创建一个自定义视频播放器，代码应该显示onmousemove事件上的覆盖，它确实会触发代码，但出于某些原因，我认为这是因为两个全屏div相互重叠，但我无法找出确切的原因 它的HTML代码如下Javascript onmousemove事件发生两次,javascript,html,css,Javascript,Html,Css,我正在尝试使用javascript创建一个自定义视频播放器，代码应该显示onmousemove事件上的覆盖，它确实会触发代码，但出于某些原因，我认为这是因为两个全屏div相互重叠，但我无法找出确切的原因 它的HTML代码如下 <!DOCTYPE html> <html> <head> <title>Video Player</title> <script src="https://ajax.
<!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>
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;
};
还有如何隐藏光标。鼠标移动或调整大小事件的触发频率在很大程度上取决于浏览器的实现。有时一个函数会被反复调用以进行fast。这就是为什么许多库在这种情况下使用“去抖动”函数的原因 我建议你读一下大卫·沃尔什的文章。它还包含一个示例函数（来自下划线.js）
该函数的
immediatewaitdiv光标包装所有内容：无正文// 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)