Как я могу определить, когда мышь покидает окно?

Question

Я хочу иметь возможность определять, когда мышь покидает окно, чтобы я мог остановить запуск событий, пока мышь пользователя находится в другом месте.

Есть идеи, как это сделать?

Answer 1

$(window).mouseleave(function() {
 alert('mouse leave');
});

Answer 2

$(window).mouseleave(function(event) {
  if (event.toElement == null) {
    //Do something
  }
})

Это может быть немного хакерским, но сработает только когда мышь покинет окно. Я продолжал ловить дочерние события, и это решило это

Answer 3

Может быть, это поможет некоторым из тех, кто придет сюда позже. window.onblur и document.mouseout.

window.onblur срабатывает, когда:

• Вы переключаетесь в другое окно, используя Ctrl+Tab или Cmd+Tab.
• Вы сосредотачиваетесь (а не только при наведении мыши) на инспектор документов.
• Вы переключаете рабочие столы.

В основном в любое время, когда вкладка браузера теряет фокус.

window.onblur = function(){
    console.log("Focus Out!")
}

document.mouseout срабатывает, когда:

• Вы перемещаете курсор на строку заголовка.
• Вы переключаетесь в другое окно, используя Ctrl+Tab или Cmd+Tab.
• При открытии переместите курсор на инспектор документов.

В основном в любом случае, когда курсор покидает документ.

document.onmouseleave = function(){
    console.log("Mouse Out!")
}

Answer 4

Может быть, если вы постоянно слушаете OnMouseOver в теге body, то выполняете обратный вызов, когда событие не происходит, но, как утверждает Зак, это может быть очень уродливо, поскольку не все браузеры обрабатывают события одинаково, есть даже вероятность того, что вы потеряли MouseOver, даже находясь над элементом div на той же странице.

Answer 5

Это будет работать в Chrome,

$(document).bind('dragleave', function (e) {
    if (e.originalEvent.clientX == 0){
        alert("left window");
    }
});

Answer 6

Я попробовал один за другим и нашел принятый выше ответ , который на самом деле работает !

https://stackoverflow.com/a/3187524/985399

Я пропускаю старые браузеры, поэтому я сократил код для работы в современных браузерах IE9 +:

    document.addEventListener("mouseout", function(e) {
        let t = e.relatedTarget || e.toElement;
        if (!t || t.nodeName == "HTML") {
          console.log("left window");
        }
    });

Здесь вы видите поддержку браузера

Но триггер "mouseout" для всех элементов в документе . Код, предотвращающий это, устраняется с помощью mouseleave (ссылка IE5.5 + se).

Следующий код работает как при отпускании мыши и drag-release вне документа:

var x = 0

document.onmouseleave = function(e) { console.log(x++) }

Не включайте событие на document.body, потому что полоса прокрутки Windows может уменьшить его и запустить выше прокрутки.

Answer 7

Я не проверял это, но мой инстинкт был бы сделать вызов функции OnMouseOut для тега body.