全屏模式下的 JavaScript 鼠标移动事件

javascript mousemove event in fullscreen

本文关键字:鼠标 移动 事件 JavaScript 模式      更新时间:2023-09-26

出于某种原因,在PC上的chrome中(在Mac上没有发生(,当您进入全屏时,会弹出内置的chromediv,说您现在处于全屏模式,当div消失时,它会触发mousemove事件。知道为什么吗?

var idleTimer;
$videoContainer.mousemove(function()
{
    if (!$jsplayer.prop('paused'))
    {
        if (idleTimer)
        {
            clearTimeout(idleTimer);
            $videoControls.stop(true,true).animate({opacity:1}, animationDuration);
        }
        idleTimer = setTimeout(function(){
            $videoControls.stop(true,true).animate({opacity:0}, animationDuration);
        },3000);
    }
});

它基本上导致我的空闲鼠标函数在鼠标实际上没有移动时触发。这似乎只发生在铬中。PC上的Firefox不这样做,Mac上的chrome不这样做。我正在使用google chrome 30.0.1599.69 m

溶液

var idleTimer;
var prevX;
$videoContainer.mousemove(function(e)
{
    if (!$jsplayer.prop('paused'))
    {
        if (idleTimer)
        {
            clearTimeout(idleTimer);
            if (prevX != e.clientX) $videoControls.stop(true,true).animate({opacity:1});
        }
        prevX = e.clientX;
        idleTimer = setTimeout(function(){
            if (!$jsplayer.prop('paused')) $videoControls.stop(true,true).animate({opacity:0}, animationDuration);
        },3000);
    }
});

您可以使用这样的函数:

(注意:我使用全局变量窗口,请记住用全局变量更改它!

window.prev_x = null;
function mousemover(e) {
    if ((window.prev_x != null) && (window.prev_x != e.x)) {
        alert(e.x + ' - '+ window.prev_x);
    }
    window.prev_x = e.x;
};
document.addEventListener('mousemove', mousemover, false);
为了避免此事件

,我猜该事件会在鼠标更改此窗口然后返回 Chrome 的 DOM触发