Question

我需要检测用户何时将鼠标移出视口外（示例鼠标在浏览器地址栏上），即使按住鼠标按钮也是如此。

从下面的代码中可以看出，我能够使用mouseout和mouseleave检测到它，但是当按住鼠标按钮并移出视口时，这些事件不会被触发

知道如何解决这个问题吗？

我定位FF和Chrome最新版本。

http://jsbin.com/gesehoneri/edit?html,output

document.addEventListener('mouseout', function () {
    console.log('mouseout');
})
document.addEventListener('mouseleave', function () {
    console.log('mouseleave');
})

Answer 1

试试这个：

＆＃13;

document.addEventListener('mousemove', function(e) {
  var top = e.pageY;
  var right = document.body.clientWidth - e.pageX;
  var bottom = document.body.clientHeight - e.pageY;
  var left = e.pageX;
  if (top < 10 || right < 10 || bottom < 10 || left < 10) {
    console.log('Mouse is out the viewport!');
  }
});

＆＃13;

body,
html {
  height: 100%;
}

＆＃13;

Answer 2

使用此代码，如果您按下窗口内的按钮，按住它并将鼠标移到窗口外，它会记录文本。这对你有帮助吗？

function myFunctioName(e){
    if(e.pageY < 0 || e.pageY > window.innerHeight) {
        console.log("outside window vertical");
    };

    if(e.pageX < 0 || e.pageX > window.innerWidth) {
        console.log("outside window horizontal");
    };
}

window.addEventListener("mousemove", myFunctioName);
window.addEventListener("mousedown", myFunctioName);

在没有JQuery的情况下更新，并包含两个方向。

如何在按住鼠标按钮并且光标在视口外时检测mouseleave？

2 个答案: