Detecta cuando el mouse sale por la parte superior de la página con jquery

Este problema de Jquery me ha estado molestando por un tiempo. Desarrollé un script, con una función que detecta cuándo el mouse se va por la parte superior de la página. Aquí está el código:Detecta cuando el mouse sale por la parte superior de la página 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});   
       }  
      } 
     } 
    });

Esto funciona perfectamente para mí en todos los navegadores. Por alguna razón, funciona aleatoriamente en Chrome y aparentemente no en absoluto en Firefox para un amigo que probó el sitio. En mi navegador (Firefox 3.5.3), e.pageY se registra en la consola como un número cerca de 0, sin embargo, en el navegador de mis amigos (también Firefox 3.5.3) el valor más bajo está alrededor de 240. No tengo idea de por qué esto está sucediendo considerando navegadores idénticos. ¿Alguien tiene una pista sobre cómo depurar esto u otro método más confiable para detectar cuándo el mouse sale de la página web por la parte superior? Espero que esto tenga sentido.

Fuente

2009-10-24 Lobe

¿Ha intentado mover el ratón muy rápido? Los eventos a veces no se activan si el mouse se mueve rápidamente. – vava

Si se mueve muy rápido, registra la mayor parte del tiempo (eso no es realmente una preocupación). Sin embargo, para probar el mouse se mueve extremadamente despacio – Lobe

@vava, solo digo que tal vez su amigo tiene una máquina/pantalla más lenta y mueve el mouse rápidamente. Esa podría ser la razón de la diferencia. – vava

El problema aparece si su ventana se desplaza hacia abajo, añaden un montón de <br/> s a su página y desplazarse una línea hacia abajo y se le ven.

Así que en vez de mirar para ver si e.pageY < = 1, restar el scrollTop:

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

Fuente

2009-10-24 14:10:37 Mottie

Muchas gracias, eso lo solucionó – Lobe

He usado otra técnica, casi funciona para todos los navegadores. El truco es usar $("body") o $(window).

$(window) no funcionan para IE, pero $("body") funciona parcialmente para FF ya que el cuerpo podría no llenar toda la ventana.

Aquí está el código de página completa:

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

Fuente

2009-10-24 11:52:15

Nota: in_out, mx, mi solo tiene fines de depuración: 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?'); 
}

Este doesn't work bien en una versión más antigua de IE, porque esas versiones no reportan el ratón posición como debería, pero es lo suficientemente bueno.

Fuente

2013-11-24 16:59:48 vsync

Aquí es una solución de vainilla JS si lo que desea es algo ligero que no necesita trabajar en la IE

/** 
* 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) 
    } 
    }) 
}

Ejemplo de Uso:

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

Fuente

2018-01-10 08:22:51 jpamorgan

Con el fin de detectar mouseleave sin tener en cuenta la barra de desplazamiento y el campo de autocompletado o inspeccionar:

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

    } 
});

Condiciones explicaciones:

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

Hemos de tener

event.clientY <= 0

Si sólo se desea detectar la salida en la parte superior

Fuente

2018-01-16 13:02:53 Dafuck

Detecta cuando el mouse sale por la parte superior de la página con jquery

Respuesta

Cuestiones relacionadas