javascript - onmousemove 事件发生两次-6ren

javascript - onmousemove 事件发生两次

转载作者：行者123 更新时间：2023-11-28 02:43:07

25

4

我正在尝试使用 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;
};

还有我如何隐藏光标。

最佳答案

mousemove 或 resize 事件的触发频率很大程度上取决于浏览器的实现。有时一个函数被反复调用是为了快。这就是为什么许多库在这种情况下使用“去抖动”功能。

我建议您阅读 David Walsh 关于 JavaScript Debounce Functions 的文章.它还包含一个示例函数(来自 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 毫秒。

关于javascript - onmousemove 事件发生两次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47065064/

25

4

0

文章推荐： c++ - 错误 : 'Date' does not name a type?

文章推荐： php - HTML 和 PHP 文件之间的动态表单验证。这可能吗？

文章推荐： javascript - 将单个单词对齐成行

发生 VBA 编译错误
下面的代码旨在在首次打开工作簿时运行。 Sub Auto_Open() Dim LastRow As Integer LastRow = Sheet6.UsedRange.Rows.Count Act
发生 C++ 堆损坏检测错误
当我尝试操作我的代码时，除了弹出调试错误外，它执行得很好。错误信息在这里。我的完整代码在这里。 #include using namespace std; class String { publi
c# - 发生 XMLParseException
The invocation of the constructor on type 'WpfApplication1.MainWindow' that matches the specified bi
android - 发生 ArrayIndexOutOfBoundsException
我正在使用 BaseAdapter: public class MyAdapter extends BaseAdapter{ private final LayoutInflater mInflate
mysql - 发生 ER_PARSE_ERROR
我想做网页抓取。我写了代码 var connection = require('./mysqlConnection'); var c = new Crawler({ maxConnections
发生 Java 堆空间错误
我的系统中发生 Java 堆空间错误。我尝试了很多来自 Stack Overflow 的解决方案，但没有任何效果。当我工作时当按下 OK 然后 (我的项目没有错误) 我的 eclipse.ini 是
c++ - D3DXERR_INVALIDDATA 发生
环境: i5 750 DDR3 4GWin7 专业版 x64 sp1 DXSDK 9.0c 2010 年 6 月 GeForce GT240(驱动程序 275.33)512MB MSVC 2008 s
发生 Python 套接字错误
这段代码是我写的。 import socket host = 'localhost' port = 3794 s = socket.socket(socket.AF_INET, socket.SOCK
c# - 发生 DateTimeInvalidLocalFormat
我正在尝试引用 UTC 时间间隔获取本地日期时间，我正在执行下面的代码。 var dtString =DateTime.UtcNow.ToString(@"yyyy-MM-ddTHH\:mm\:ss
c# - LoadFromContext 发生
我有一个非常简单的 C# 问题，它从库中加载 Windows WPF 窗口。这是代码: public partial class App : Application { public App(
android - 发生 fragment 加载闪烁时带有导航组件的底部导航
我目前正在使用带有导航组件的底部导航，它工作正常但是当我们点击导航项 fragment 正在加载然后闪烁正在发生，即使当前选择的项目也会发生闪烁。它在加载 fragment 时发生。我的应用程序屏幕背
nullpointerexception - Kotlin NullPointerException 发生
我是新来的 kotlin , 当我开始 Null Safety 时，我对下面的情况感到困惑. There's some data inconsistency with regard to initia
css - 发生 css 转换时如何阻止我的文本移动
我有一个框，其中包含同时发生的两个独立的 css 转换。当转换发生时，图标下方的标题和段落文本移动位置参见 JS Fiddle:http://jsfiddle.net/Lsnbpt8r/ 这是我的
cordova - 发生 native 打包程序异常
在为黑莓 10 构建电话间隙应用程序时，我遇到了异常情况。 [BUILD] Populating application source [BUILD] Parsing config.xml [
java - 发生 JNI 代码错误时如何正确停止线程？
这个问题在这里已经有了答案: How to properly stop the Thread in Java? (8 个回答) 3年前关闭。我看过How to properly stop the T
发生 fatal error 时php重新加载页面
我试图弄清楚发生 fatal error 时如何刷新页面。基本上我正在访问图像 api 并将图像复制到我的服务器。我还每次都创建照片的缩略图版本。我会每隔一段时间收到一条错误消息，指出我的脚本试图分配
java - 使用断言检查元素是否在屏幕上，发生 NoSuchElementException
我正在尝试使用断言函数检查元素是否在屏幕上。我在我的测试应用程序 (AndroidDriver) 中使用 Appium 和 Java。我期望的是，如果元素在屏幕上，则返回 1；如果不在屏幕上，则返回
java - 发生 MaxUploadSizeExceededException 时如何关闭套接字？
我正在开发图像上传系统。我使用 CommonsMultipartResolver 设置 maxUploadSize。当我尝试上传超过最大尺寸的图像文件时，会发生 MaxUploadSizeExcced
java - 发生 UnsatisfiedDependencyException 错误
我有以下代码和@ComponentScan(basePackages = "com.project.shopping")，包结构为 com.project.shopping.Controller co
java - 发生 JNI 错误
我尝试运行此程序作为测试，但收到错误“发生了 JNI 错误，请检查您的安装并重试”，然后是“发生了 Java 异常”。关于如何解决这个问题有什么想法吗？ package java; public cl

首页

博学

6Ren·AI

商城

javascript - onmousemove 事件发生两次