javascript - saber - ¿Cómo puedo detectar cuándo el mouse sale de la ventana?
obtener coordenadas de una imagen javascript (16)
Quiero ser capaz de detectar cuándo el mouse sale de la ventana para poder evitar que los eventos se activen mientras el mouse del usuario está en otro lugar.
Alguna idea de como hacer esto?
El uso del evento onMouseLeave evita el burbujeo y te permite detectar fácilmente cuando el mouse sale de la ventana del navegador.
<html onmouseleave="alert(''You left!'')"></html>
Esto funcionó para mí. Una combinación de algunas de las respuestas aquí. E incluí el código que muestra un modelo solo una vez. Y el modelo desaparece cuando se hace clic en cualquier otro lugar.
<script>
var leave = 0
//show modal when mouse off of page
$("html").mouseleave(function() {
//check for first time
if (leave < 1) {
modal.style.display = "block";
leave = leave + 1;
}
});
// Get the modal with id="id01"
var modal = document.getElementById(''id01'');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
Esto funciona para mí:
addEvent(document, ''mouseout'', function(evt) {
if (evt.toElement == null && evt.relatedTarget == null) {
alert("left window");
}
});
Esto funcionará en Chrome,
$(document).bind(''dragleave'', function (e) {
if (e.originalEvent.clientX == 0){
alert("left window");
}
});
He intentado todo lo anterior, pero nada parece funcionar como se esperaba. Después de investigar un poco, descubrí que e.relatedTarget es el html justo antes de que el mouse salga de la ventana .
Entonces ... terminé con esto:
document.body.addEventListener(''mouseout'', function(e) {
if(e.relatedTarget === document.querySelector(''html'')) {
console.log(''We/'re OUT !'');
}
});
Por favor, avíseme si encuentra problemas o mejoras.
Ninguna de estas respuestas funcionó para mí. Ahora estoy usando:
document.addEventListener(''dragleave'', function(e){
var top = e.pageY;
var right = document.body.clientWidth - e.pageX;
var bottom = document.body.clientHeight - e.pageY;
var left = e.pageX;
if(top < 10 || right < 20 || bottom < 10 || left < 10){
console.log(''Mouse has moved out of window'');
}
});
Estoy usando esto para un widget de carga de archivos de arrastrar y soltar. No es absolutamente preciso, se activa cuando el mouse llega a una cierta distancia desde el borde de la ventana.
No he probado esto, pero mi instinto sería hacer una llamada a la función OnMouseOut en la etiqueta del cuerpo.
Para detectar mouseleave sin tener en cuenta la barra de desplazamiento y el campo de autocompletar 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");
}
});
Explicaciones de las condiciones:
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
Retiro lo que dije. Es posible. Escribí este código, funciona perfectamente.
window.onload = function() {
$span = document.getElementById(''text'');
window.onmouseout = function() {
$span.innerHTML = "mouse out";
}
window.onmousemove = function() {
$span.innerHTML = "mouse in";
}
}
funciona en cromo, firefox, ópera. No se ha probado en IE pero se supone que funciona.
editar. IE como siempre causa problemas. Para que funcione en IE, reemplace los eventos de la ventana al documento:
window.onload = function() {
$span = document.getElementById(''text'');
document.onmousemove = function() {
$span.innerHTML = "mouse move";
}
document.onmouseout = function() {
$span.innerHTML = "mouse out";
}
}
Combínalos para la detección de cursor de asteroide kick kick o0: P
Si está utilizando jQuery, ¿qué hay de este código corto y dulce -
$(document).mouseleave(function () {
console.log(''out'');
});
Este evento se activará siempre que el mouse no esté en su página como desee. Solo cambia la función para hacer lo que quieras.
Y también puedes usar:
$(document).mouseenter(function () {
console.log(''in'');
});
Para disparar cuando el mouse entra nuevamente a la página.
Fuente: https://.com/a/16029966/895724
Tal vez esto ayude a algunos de los que vendrán más tarde. window.onblur y document.mouseout .
window.onblur se activa cuando:
- Cambia a otra ventana usando
Ctrl+TaboCmd+Tab. - Usted se centra (no solo mouseover) en el inspector de documentos.
- Usted cambia de escritorio.
Básicamente, en cualquier momento, esa pestaña del navegador pierde el foco.
window.onblur = function(){
console.log("Focus Out!")
}
document.mouseout se activa cuando:
- Mueve el cursor a la barra de título.
- Cambia a otra ventana usando
Ctrl+TaboCmd+Tab. - Abra el cursor hacia el inspector de documentos.
Básicamente, en cualquier caso, cuando el cursor sale del documento.
document.onmouseleave = function(){
console.log("Mouse Out!")
}
Tal vez si constantemente escuchas OnMouseOver en la etiqueta corporal, devuelve la llamada cuando el evento no está ocurriendo, pero, como dice Zack, esto podría ser muy feo, porque no todos los navegadores manejan los eventos de la misma manera, incluso hay algunos Posibilidad de perder el MouseOver incluso por estar sobre un div en la misma página.
aplicar este CSS:
html
{
height:100%;
}
Esto asegura que el elemento html ocupe toda la altura de la ventana.
aplicar este jquery:
$("html").mouseleave(function(){
alert(''mouse out'');
});
El problema con mouseover y mouseout es que si pasa el mouse sobre / fuera de html a un elemento secundario se activará el evento. La función que di no se activa al pasar a un elemento secundario. Solo se activa cuando sacas el mouse / in de la ventana
solo para que sepas que puedes hacerlo cuando el usuario se mueva en la ventana:
$("html").mouseenter(function(){
alert(''mouse enter'');
});
Este tipo de comportamiento generalmente se desea al implementar el comportamiento de arrastrar y soltar en una página html. La siguiente solución se probó en IE 8.0.6, FireFox 3.6.6, Opera 10.53 y Safari 4 en una máquina MS Windows XP.
Primero una pequeña función de Peter-Paul Koch; Controlador de eventos de navegador cruzado:
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
Y luego use este método para adjuntar un controlador de eventos al evento mouseout de los objetos del documento:
addEvent(document, "mouseout", function(e) {
e = e ? e : window.event;
var from = e.relatedTarget || e.toElement;
if (!from || from.nodeName == "HTML") {
// stop your drag event here
// for now we can just use an alert
alert("left window");
}
});
Finalmente, aquí hay una página html con el script incrustado para la depuración:
<html>
<head>
<script type="text/javascript">
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
addEvent(window,"load",function(e) {
addEvent(document, "mouseout", function(e) {
e = e ? e : window.event;
var from = e.relatedTarget || e.toElement;
if (!from || from.nodeName == "HTML") {
// stop your drag event here
// for now we can just use an alert
alert("left window");
}
});
});
</script>
</head>
<body></body>
</html>
$(window).mouseleave(function() {
alert(''mouse leave'');
});
$(window).mouseleave(function(event) {
if (event.toElement == null) {
//Do something
}
})
Esto podría ser un poco raro, pero solo se disparará cuando el mouse abandone la ventana. Seguí atrapando eventos infantiles y esto lo resolvió