Rileva quando il mouse esce dalla parte superiore della pagina con jquery

Questo problema di Jquery mi ha infastidito da un po 'di tempo. Ho sviluppato uno script, con una funzione che rileva quando il mouse esce dalla parte superiore della pagina. Ecco il codice:Rileva quando il mouse esce dalla parte superiore della pagina con 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});   
       }  
      } 
     } 
    });

Questo funziona perfettamente per me in tutti i browser. Per qualche motivo funziona in modo casuale in Chrome e apparentemente non è affatto in Firefox per un amico che ha testato il sito. Nel mio browser (Firefox 3.5.3), e.pageY viene registrato nella casella della console come un numero vicino a 0, tuttavia nel browser dei miei amici (anche Firefox 3.5.3) il valore più basso è intorno a 240. Non ho idea del perché questo sta accadendo considerando browser identici. Qualcuno ha un indizio su come eseguire il debug di questo, o un altro metodo più affidabile per rilevare quando il mouse esce dalla pagina web tramite la parte superiore? Spero che abbia senso.

fonte

2009-10-24 Lobe

Hai provato a spostare il mouse veramente veloce? Gli eventi a volte non sparano se il mouse si muove rapidamente. – vava

Se si spostano molto rapidamente, registra la maggior parte del tempo (che non è davvero una preoccupazione). Tuttavia, per testare il mouse si sta muovendo estremamente lentamente – Lobe

@vava, sto solo dicendo che forse il tuo amico ha una macchina più lenta/schermo più grande e muove il mouse velocemente. Questa potrebbe essere la ragione della differenza. – vava

Il problema sembra se la vostra finestra scorre verso il basso, aggiungere un po 'di <br/> s alla tua pagina e scorrere verso il basso di una riga e ti vedono.

Così, invece di cercare di vedere se e.pageY < = 1, sottrarre lo scrollTop:

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

fonte

2009-10-24 14:10:37 Mottie

Grazie mille, che lo ha risolto – Lobe

Ho usato un'altra tecnica, quasi funziona per tutti i browser. Il trucco sta usando $("body") o $(window).

$(window) non funzionano per IE, ma $("body") funziona parzialmente per FF in quanto il corpo potrebbe non riempire l'intera finestra.

Ecco il codice pagina intera:

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

fonte

2009-10-24 11:52:15

Nota: in_out, mx, my sono solo a scopo di debug: 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?'); 
}

Questo doesn't work bene su più vecchia versione di IE, perché queste versioni non riportano il mouse posizione come dovrebbe, ma è abbastanza buono.

fonte

2013-11-24 16:59:48 vsync

Ecco una soluzione di vaniglia JS se si desidera solo qualcosa di leggero che non ha bisogno di lavorare 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) 
    } 
    }) 
}

Esempio di utilizzo:

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

fonte

2018-01-10 08:22:51 jpamorgan

Al fine di rilevare mouseLeave senza prendere in considerazione la barra di scorrimento e il campo di completamento automatico o ispezionare:

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

    } 
});

Condizioni spiegazioni:

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

Basta tenere

event.clientY <= 0

Se si desidera solo per rilevare l'uscita in cima

fonte

2018-01-16 13:02:53 Dafuck

Rileva quando il mouse esce dalla parte superiore della pagina con jquery

risposta

Problemi correlati