Question

我遇到了问题，我需要知道用户是否在进入全屏时实际移动了鼠标，或者是否只是进入全屏的编程副作用。

因为，当进入全屏时，鼠标Y坐标会自动更改，因为鼠标在绝对屏幕位置向上移动（因为浏览器的顶部导航消失）。并且由于每个浏览器都以全屏模式显示通知，因此此通知会触发mousemove事件。

因此，无论用户是否实际移动鼠标，都会非常痛苦。

是否有识别真实鼠标移动的解决方案？

$(document).on('mousemove', function(event){
   /* gets also triggered when just entering fullscreen,
      but without actual movement of the physical mouse..
      how can this be identified/ignored?
   */
});

JS Fiddle

到目前为止我尝试了什么

我尝试使用类似window.screen.top的东西来重新激活鼠标位置 - 但到目前为止，任何浏览器似乎都没有实现这一点。

Answer 1

我认为尚未正式实施任何检测全屏的内容。有fullscreenchange作为Fullscreen API的一部分，但它仍然是实验性的，需要特定于供应商的前缀。

所以，基本上你必须通过一些技巧来解决这个限制，比如交叉resize事件并跳过你在mousemove上运行的任何逻辑。这是一个例子......

var resizing = false;

$(document).on('mousemove', function(event){
    if(resizing == false){
    $('p').text(event.pageX + ':' + event.pageY);
        console.log("moving");
    }
});

$(window).resize(function(){
    resizing = true;

    setTimeout(function(){
        resizing = false;
    }, 4000);
});

此示例仅定义一个标志，用于确定窗口是否正在调整大小，如果跳过调整onmousemove逻辑的大小。特别是我讨厌在任意时间内使用setTimeout来关闭resizing标志，但如果你的要求不那么严格，那么就可以很好地完成工作

Answer 2

为什么不在忽略所有鼠标输入的情况下加入延迟（例如0.5秒）。延迟之后，任何鼠标移动都可能来自用户......

Answer 3

我现在通过保存鼠标坐标来解决它，并检查它们是否发生变化 - 我在全屏后强制执行一次mousemove事件以便更新坐标一次。

$(document).on('mousemove', function(event){
    if(event.pageX == $(this).data('mouseX') && event.pageY == $(this).data('mouseY'))
         return;
    $(this)
        .data('mouseX',  event.pageX)
        .data('mouseY',  event.pageY)
    ;
});
$(document).mousemove();

如何在进入全屏模式时识别REAL鼠标移动

到目前为止我尝试了什么

3 个答案: