Как я могу проверить, вышла ли мышь из окна браузера с помощью javascript / jquery? - PullRequest
Новая
       1

Как я могу проверить, вышла ли мышь из окна браузера с помощью javascript / jquery?

6 голосов
/ 16 января 2012

Мне нужен способ проверить, находится ли мышь вне окна браузера.Проблема в том, что событие mouseout (или mousemove) не запускается, когда мышь БЫСТРО перемещается за пределы окна браузера (мой элемент находится близко к краю).Я решил, что лучший способ решить мою проблему - это проверить по таймеру, находится ли мышь внутри окна или нет, но я не нашел способа сделать это, так как мне нужно событие, чтобы вызвать мышькоординаты.

Я новичок в javascript / jquery, но похоже, что должен быть способ сделать это, но я определенно не смог найти его до сих пор.Может быть, я мог бы принудительно вызвать событие мыши и посмотреть, есть ли значение xy?Есть идеи, как мне это сделать?

Заранее спасибо!

Ответы [ 6 ]

6 голосов
/ 16 января 2012

Похоже, @ Джошуа Миллс решил эту проблему здесь:

Хотя он никогда не был официально выбран в качестве ответа.

3 голосов
/ 19 октября 2016

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

Демонстрационная версия

JS 

$(function() {
    var $window = $(window),
        $html = $('html');
    $window.on('mouseleave', function(event) {
        if (!$html.is(event.target))
            return;
        $('.comeback').removeClass('hidden');
    });
    $window.on('mouseenter', function(event) {
        $('.comeback').addClass('hidden');
    });
});

HTML 

<div>
    <div>
        Test
    </div>
    <div class="comeback">
        Come back!
    </div>
    <div>
        Test
    </div>
</div>

CSS 

.hidden { display: none; }

Тестовый пример включает в себя вложение некоторых элементов, чтобы убедиться, что оно действительно работает.

1 голос
/ 08 июня 2014

Я думаю, это будет выглядеть как 

 <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>
0 голосов
/ 20 июня 2019

Я пробовал один за другим, и это действительно работает!

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

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

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

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

0 голосов
/ 22 марта 2017

Попробуйте с: 

document.addEventListener("mouseleave", function(e){
    if( e.clientY < 0 )
    {
         alert("I'm out!");
    }
}, false);
0 голосов
/ 16 января 2012

Это должно быть довольно просто: 

document.onmouseout = function() {
  alert('out');
};

Или стиль jQuery: 

$(document).mouseout(function() {
  alert('out');
});

Скрипка: http://jsfiddle.net/xjJAB/

Проверено в IE8, хром, FF. Событие срабатывает каждый раз, по крайней мере, для меня.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...