当鼠标按钮被按住并且光标在视口外时如何检测鼠标离开？

Question

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

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

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

我的目标是 FF 和 Chrome 最新版本。

http://jsbin.com/gesehoneri/edit?html，输出

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

Answer 1

尝试这个：

 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!'); } });

 body, html { height: 100%; }

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 的情况下使用并包含两个方向。