Erkennen, Wann Maus lässt über top-of-page mit jquery

Das Jquery-problem nervt mich nun schon eine Weile. Ich habe ein Skript entwickelt, mit einer Funktion, der erkennt, wenn die Maus lässt über den oberen Rand der Seite. Hier ist der code:

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

Dieser funktioniert perfekt für mich in allen Browsern. Aus irgendeinem Grund funktioniert es zufällig in Chrom und scheinbar gar nicht in Firefox für einen Freund, geprüft Website. In meinem browser (firefox 3.5.3), e.pageY angemeldet ist in der Konsole der box, wie eine Zahl in der Nähe von 0, aber in meinem Freunde-browser (auch firefox 3.5.3) der niedrigste Wert liegt bei 240. Ich habe keine Ahnung, warum dies geschieht unter Berücksichtigung identischen Browsern. Hat jemand eine Ahnung, wie das zu Debuggen, oder eine weitere zuverlässige Methode, um festzustellen, Wann die Maus geht aus der Webseite, die Sie über die top? Ich hoffe, das macht Sinn.

Haben Sie versucht, die Maus zu bewegen wirklich schnell? Ereignisse manchmal nicht ausgelöst, wenn die Maus schnell bewegt.
Wenn die Bewegung sehr schnell registriert er die Mehrheit der Zeit (das ist nicht wirklich ein Problem). Jedoch zum testen die Maus bewegt sich extrem langsam
Ich sage nur, dass vielleicht dein Freund hat langsamere Maschine/größeren Bildschirm und bewegt die Maus schnell. Das könnte der Grund sein für die Differenz.

InformationsquelleAutor Lobe | 2009-10-24

13

Scheint das problem wenn das Fenster scrollt, fügen Sie ein paar <br/>s zu Ihrer Seite und scrollen Sie eine Zeile nach unten und du wirst es sehen.

Anstatt also auf der Suche um zu sehen, ob e.pageY <=1, subtrahieren sich die scrollTop:
```
if (e.pageY - $(window).scrollTop() <= 1)
    {    
    //do something
    }
```
InformationsquelleAutor Mottie

Benutzte ich eine andere Technik, fast funktioniert für alle Browser. Der trick besteht darin, mit $("body") oder $(window).

$(window) arbeiten nicht für den IE, aber $("body") arbeiten teilweise für FF, da der Körper möglicherweise nicht das ganze Fenster auszufüllen.

Hier ist die ganze Seite code:

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

Hinweis: in_out, mx, my sind für debugging-Zwecke nur 😛

InformationsquelleAutor o.k.w

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

Diese funktioniert nicht auch auf älteren IE-version, da diese Versionen nicht melden, die Maus-position als soll, aber es ist gut genug.

InformationsquelleAutor vsync

Hier ist ein vanilla JS Lösung, wenn Sie nur wollen, etwas Licht-Gewicht, die nicht arbeiten müssen, in 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)
    }
  })
}

Beispiel:

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

InformationsquelleAutor jpamorgan

Um zu erkennen, mouseleave, ohne Berücksichtigung der Bildlaufleiste und der autcomplete Feld oder überprüfen Sie :

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

  }
});

Bedingungen Erläuterungen:

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

Nur halten

event.clientY <= 0

Wenn Sie nur wollen, um zu erkennen, Ausgang auf top

InformationsquelleAutor Daphoque

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.