Wykryj kiedy mysz opuszcza górną stronę jquery

Ten problem z Jquery od pewnego czasu mnie dręczy. Opracowałem skrypt z wykrywaniem jednej funkcji, gdy mysz opuszcza górną część strony. Oto kod:Wykryj kiedy mysz opuszcza górną stronę 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});   
       }  
      } 
     } 
    });

Działa to idealnie dla mnie we wszystkich przeglądarkach. Z jakiegoś powodu działa on losowo w Chrome i najwyraźniej nie jest w ogóle w Firefoksie dla znajomego, który testował witrynę. W mojej przeglądarce (firefox 3.5.3), e.pageY jest zalogowany w konsoli jako liczba blisko 0, jednak w mojej przeglądarce znajomych (także firefox 3.5.3) najniższa wartość to około 240. Nie mam pojęcia, dlaczego to dzieje się przy identycznych przeglądarkach. Czy ktokolwiek ma jakąś wskazówkę, jak to debugować, lub inną bardziej niezawodną metodę wykrywania, kiedy mysz wychodzi z góry strony? Mam nadzieję, że to ma sens.

Źródło

2009-10-24 Lobe

Czy próbowałeś przesuwając mysz naprawdę szybkie? Zdarzenia czasami nie uruchamiają się, jeśli mysz porusza się szybko. – vava

Jeśli poruszasz się bardzo szybko, rejestruje on większość czasu (to nie jest problem). Jednak do testowania mysz porusza się niezwykle powoli. – Lobe

@vava, mówię tylko, że może twój przyjaciel ma wolniejszą maszynę/większy ekran i porusza myszą szybko. To może być przyczyna różnicy. – vava

Problem pojawia się, gdy okno przewija w dół, dodać kilka <br/> s do swojej strony i przewinąć w dół o jedną linię i będziesz go zobaczyć.

Więc zamiast szukać, aby zobaczyć czy e.pageY < = 1, odejmuje się z scrollTop:

if (e.pageY - $(window).scrollTop() <= 1) 
    {  
    // do something 
    }

Źródło

2009-10-24 14:10:37 Mottie

Wielkie dzięki, że to naprawili – Lobe

Użyłem innej techniki, prawie działa dla wszystkich przeglądarek. Sztuczka polega na użyciu $("body") lub $(window).

$(window) nie działają dla IE, ale $("body") działa częściowo dla FF, ponieważ ciało może nie wypełniać całego okna.

Oto pełny kod strony:

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

Źródło

2009-10-24 11:52:15

Uwaga: in_out, mx, moje są przeznaczone wyłącznie do debugowania: P –

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

Ten doesn't work dobrze na starszej wersji IE, bo te wersje nie zgłaszają myszy pozycja powinna, ale jest wystarczająco dobra.

Źródło

2013-11-24 16:59:48 vsync

Oto rozwiązanie wanilia JS jeśli po prostu chcesz coś waga lekka, że nie potrzeba do pracy w 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) 
    } 
    }) 
}

Przykład użycia:

onExit(20, function() { 
    console.log('Mouse has left the top of the window!') 
}

Źródło

2018-01-10 08:22:51 jpamorgan

W celu wykrycia mouseLeave bez uwzględnienia paska przewijania i pola autouzupełniania lub sprawdź:

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

    } 
});

Warunki wyjaśnienia:

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

prostu zachować

event.clientY <= 0

Jeśli chcesz tylko wykrywa zjazd na górze

Źródło

2018-01-16 13:02:53 Dafuck

Wykryj kiedy mysz opuszcza górną stronę jquery

Odpowiedz

Powiązane problemy