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

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

Любые идеи о том, как это сделать?

ОТВЕТЫ

Ответ 1

Этот тип поведения обычно требуется при реализации поведения перетаскивания на странице 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-страница с script встроенным для отладки:

<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>

Ответ 2

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

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

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

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

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

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

Источник: fooobar.com/questions/33632/...

Ответ 3

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

addEvent(document, 'mouseout', function(evt) {
  if (evt.toElement == null && evt.relatedTarget == null) {
    alert("left window");
  }
});

Ответ 4

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

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

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

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

});

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

Ответ 6

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

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

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

Ответ 7

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

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";
    }

}

объединить их для обнаружения курсора мыши с помощью crossbrowser o0: P

Ответ 8

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

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


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

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

2019 Обновление

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

document.body.addEventListener('mouseout', function(e) {
    if (!e.relatedTarget && !e.toElement) {
        console.log('We\'re OUT !');
    }
});

Ответ 9

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

html
{
height:100%;
}

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

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

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

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

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

$("html").mouseenter(function(){
  alert('mouse enter');
});

Ответ 10

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

Ответ 11

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

window.onblur запускается, когда:

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

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

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

document.mouseout запускается, когда:

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

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

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

Ответ 12

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

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

Ответ 13

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

Ответ 14

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

<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>

Ответ 15

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

fooobar.com/questions/33625/...

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

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

Ответ 16

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

Ответ 17

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

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