文章/答案/技术大牛

发布

社区首页 >问答首页 >onmousemove事件发生两次

问onmousemove事件发生两次
EN

Stack Overflow用户

提问于 2017-11-01 23:08:48

回答 1查看 320关注 0票数 1

我正在尝试使用javascript创建一个自定义视频播放器，代码应该在onmousemove事件上显示覆盖--它确实触发了代码--但由于某些原因，我认为发生这种情况是因为双全屏div位于对方之上，但我不知道确切原因。

它的HTML代码如下

<!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代码如下所示

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;
};

此外，我如何隐藏光标。

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-11-01 23:25:51

mousemove或调整大小事件的触发频率在很大程度上取决于浏览器实现。有时，一个函数被反复调用为fast。这就是为什么在这种情况下许多库使用“删除”函数的原因。

我建议你读大卫·沃尔什关于JavaScript去弹跳函数的文章。它还包含一个示例函数(来自Underscore.js)。

// 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标志导致调用给定的事件处理程序一次，在事件第一次被触发的时候，但不会再次调用，直到该事件在wait毫秒内不再被触发。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47065064

复制

相似问题

问onmousemove事件发生两次
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问onmousemove事件发生两次EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问onmousemove事件发生两次
EN