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

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

77 голосов
/ 29 мая 2009

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

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

Ответы [ 17 ]

92 голосов
/ 06 июля 2010

Этот тип поведения обычно желателен при реализации поведения перетаскивания на html-странице. Приведенное ниже решение было протестировано на IE 8.0.6, FireFox 3.6.6, Opera 10.53 и Safari 4 на компьютере с MS Windows XP.
Сначала небольшая функция от Питера-Пола Коха; кросс-браузерный обработчик событий: 

function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}

А затем используйте этот метод для присоединения обработчика события к событию mouseout объектов документа: 

addEvent(document, "mouseout", function(e) {
    e = e ? e : window.event;
    var from = e.relatedTarget || e.toElement;
    if (!from || from.nodeName == "HTML") {
        // stop your drag event here
        // for now we can just use an alert
        alert("left window");
    }
});

Наконец, вот HTML-страница со скриптом, встроенным для отладки: 

<html>
<head>
<script type="text/javascript">
function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}
addEvent(window,"load",function(e) {
    addEvent(document, "mouseout", function(e) {
        e = e ? e : window.event;
        var from = e.relatedTarget || e.toElement;
        if (!from || from.nodeName == "HTML") {
            // stop your drag event here
            // for now we can just use an alert
            alert("left window");
        }
    });
});
</script>
</head>
<body></body>
</html>
39 голосов
/ 13 октября 2014

Если вы используете jQuery, как насчет этого короткого и приятного кода - 

$(document).mouseleave(function () {
    console.log('out');
});

Это событие будет срабатывать, когда мышь находится не на вашей странице, как вы хотите. Просто измените функцию, чтобы сделать все, что вы хотите.

И вы также можете использовать: 

$(document).mouseenter(function () {
    console.log('in');
});

Для запуска при повторном входе мыши на страницу.

Источник: https://stackoverflow.com/a/16029966/895724

23 голосов
/ 10 февраля 2012

Это работает для меня: 

addEvent(document, 'mouseout', function(evt) {
  if (evt.toElement == null && evt.relatedTarget == null) {
    alert("left window");
  }
});
9 голосов
/ 16 января 2018

Для того, чтобы обнаружить отпуск мыши без учета полосы прокрутки и поля автозаполнения или проверки: 

document.addEventListener("mouseleave", function(event){

  if(event.clientY <= 0 || event.clientX <= 0 || (event.clientX >= window.innerWidth || event.clientY >= window.innerHeight))
  {

     console.log("I'm out");

  }
});

Условия объяснения: 

event.clientY <= 0  is when the mouse leave from the top
event.clientX <= 0  is when the mouse leave from the left
event.clientX >= window.innerWidth is when the mouse leave from the right
event.clientY >= window.innerHeight is when the mouse leave from the bottom
5 голосов
/ 12 декабря 2014

Ни один из этих ответов не работал для меня. Я сейчас использую: 

document.addEventListener('dragleave', 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 < 20 || bottom < 10 || left < 10){
        console.log('Mouse has moved out of window');
    }

});

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

4 голосов
/ 31 декабря 2015

Использование события onMouseLeave предотвращает образование пузырьков и позволяет легко определять, когда мышь покидает окно браузера. 

<html onmouseleave="alert('You left!')"></html>

http://www.w3schools.com/jsref/event_onmouseleave.asp

3 голосов
/ 07 февраля 2015

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

Итак ... Я в конечном итоге это: 


<s>document.body.addEventListener('mouseout', function(e) {
    if (e.relatedTarget === document.querySelector('html')) {
        console.log('We\'re OUT !');
    }
});</s>

Пожалуйста, дайте мне знать, если вы обнаружите какие-либо проблемы или улучшения!

2019 Обновление

(как выяснил пользователь1084282) 

document.body.addEventListener('mouseout', function(e) {
    if (!e.relatedTarget && !e.toElement) {
        console.log('We\'re OUT !');
    }
});
3 голосов
/ 29 мая 2009

Я забрал то, что сказал. Это возможно. Я написал этот код, работает отлично. 

window.onload = function() {

    $span = document.getElementById('text');

    window.onmouseout = function() {
        $span.innerHTML = "mouse out";  
    }

    window.onmousemove = function() {
        $span.innerHTML = "mouse in";   
    }

}

работает в Chrome, Firefox, Opera. Aint протестирован в IE, но предположим, что он работает.

редактировать. IE как всегда вызывает неприятности. Чтобы это работало в IE, замените события из окна в документ: 

window.onload = function() {

    $span = document.getElementById('text');

    document.onmousemove = function() {
        $span.innerHTML = "mouse move";
    }

    document.onmouseout = function() {
        $span.innerHTML = "mouse out";
    }

}

объединить их для обнаружения курсора над головой

1 голос
/ 09 ноября 2014

применить этот CSS: 

html
{
height:100%;
}

Это гарантирует, что элемент html занимает всю высоту окна.

примените этот jquery: 

$("html").mouseleave(function(){
 alert('mouse out');
});

Проблема с наведением и наведением мыши состоит в том, что если вы наведете указатель мыши на / из html на дочерний элемент, это вызовет событие. Функция, которую я дал , не отключена при подключении к дочернему элементу. Выключается только при наведении курсора мыши на окно

только для того, чтобы вы знали, что вы можете сделать это, когда пользователь наводит мышью в окне: 

$("html").mouseenter(function(){
  alert('mouse enter');
});
0 голосов
/ 10 ноября 2017

Это сработало для меня. Сочетание некоторых ответов здесь. И я включил код, показывающий модель только один раз. И модель исчезает при нажатии в другом месте. 

<script>
    var leave = 0
    //show modal when mouse off of page
    $("html").mouseleave(function() {
       //check for first time
       if (leave < 1) {
          modal.style.display = "block";
          leave = leave + 1;
       }
    });

    // Get the modal with id="id01"
       var modal = document.getElementById('id01');

    // When the user clicks anywhere outside of the modal, close it
       window.onclick = function(event) {
          if (event.target == modal) {
             modal.style.display = "none";
          }
       }
</script>
Страница:
...