Определить, когда мышь уходит через верх страницы с помощью jquery - PullRequest
Новая
       35

Определить, когда мышь уходит через верх страницы с помощью jquery

8 голосов
/ 24 октября 2009

Эта проблема с Jquery давно меня беспокоит. Я разработал скрипт, в котором одна функция определяет, когда мышь уходит через верх страницы. Вот код: 

    $(document).bind("mouseleave", function(e)
    {
    console.log(e.pageY);
    if (e.pageY <= 1)
        {    
        now = new Date();           
        for (i=0; i < times.length; i++)
            {
            if (now.getTime() > times[i][0] && now.getTime() < times[i][1])
                {
                    $.fn.colorbox({iframe:true, width:650, height:600, href: "work.html", open: true});          
                }    
            }
        }
    });

Это прекрасно работает для меня во всех браузерах. По какой-то причине он работает случайным образом в Chrome и, похоже, совсем не работает в Firefox для друга, который тестировал сайт. В моем браузере (firefox 3.5.3) e.pageY регистрируется в окне консоли как число около 0, однако в моем браузере друзей (также firefox 3.5.3) самое низкое значение составляет около 240. Я понятия не имею, почему это происходит с учетом идентичных браузеров. Кто-нибудь знает, как отладить это, или другой более надежный метод для определения, когда мышь выходит из веб-страницы через верх? Я надеюсь, что это имеет смысл.

Ответы [ 5 ]

13 голосов
/ 24 октября 2009

Проблема появляется, если ваше окно прокручивается вниз, добавьте на свою страницу группу <br/> s и прокрутите вниз на одну строку, и вы увидите ее.

Так что вместо того, чтобы посмотреть, если e.pageY <= 1, вычтите scrollTop: </p> 

if (e.pageY - $(window).scrollTop() <= 1)
    {    
    // do something
    }
0 голосов
/ 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

Просто держи 

event.clientY <= 0

Если вы хотите обнаружить выход сверху

0 голосов
/ 10 января 2018

Вот ванильное решение JS, если вы просто хотите что-то более легкое, которое не должно работать в EI 

/**
 * Trigger an event when the cursor leaves the top of the window
 * @param {*} threshold how close does it need to be to the top
 * @param {*} cb callback function to trigger
 */
function onExit (threshold, cb) {
  threshold = threshold || 60
  var hasExited = false
  document.addEventListener('mouseout', function (e) {
    if (e.clientY < threshold && e.movementY < 0 && !hasExited) {
      hasExited = true
      cb(e)
    }
  })
}

Пример использования: 

onExit(20, function() {
  console.log('Mouse has left the top of the window!')
}
0 голосов
/ 24 ноября 2013 
$(document).on('mouseleave', leaveFromTop);

function leaveFromTop(e){
    if( e.clientY < 0 ) // less than 60px is close enough to the top
      alert('y u leave from the top?');
}

Это не работает хорошо на старой версии IE, потому что эти версии не сообщают положение мыши, как должно, но это достаточно хорошо.

0 голосов
/ 24 октября 2009

Я использовал другую технику, почти работает для всех браузеров. Трюк использует $("body") или $(window).

$(window) не работают для IE, но $("body") частично работает для FF, поскольку тело может не заполнять все окно.

Вот полный код страницы: 

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>
  var mouseX = 0;
  var mouseY = 0;
  var theFrame;
$(function() {
    theFrame = $("body"); //$(window) for non-IE
      theFrame.mousemove( function(e) {
        //horizontal distance from edge
        mouseX = Math.min(theFrame.width() - e.pageX, e.pageX);
        //vertical distance from top
        mouseY = e.pageY;
        $("#mx").html(mouseX);
        $("#my").html(mouseY);
      });
    theFrame.mouseout(function() {
        if(mouseY<=mouseX)
            $("#in_out").html("out-top");
        else
            $("#in_out").html("out");
    });
    theFrame.mouseover(function() {
        $("#in_out").html("in");
    });
});
</script> 
</head>
<body>
<span id="in_out"></span>
<br />Hor: <span id="mx"></span>
<br />Ver: <span id="my"></span>

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

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

...