Voglio essere in grado di rilevare quando il mouse lascia la finestra in modo da poter interrompere l'attivazione degli eventi mentre il mouse dell'utente è altrove.
Qualche idea su come farlo?
Voglio essere in grado di rilevare quando il mouse lascia la finestra in modo da poter interrompere l'attivazione degli eventi mentre il mouse dell'utente è altrove.
Qualche idea su come farlo?
Risposte:
Questo tipo di comportamento è solitamente desiderato durante l'implementazione del comportamento di trascinamento su una pagina html. La soluzione seguente è stata testata su IE 8.0.6, FireFox 3.6.6, Opera 10.53 e Safari 4 su una macchina MS Windows XP.
Prima una piccola funzione di Peter-Paul Koch; gestore di eventi cross browser:
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
Quindi utilizzare questo metodo per collegare un gestore di eventi all'evento mouseout degli oggetti 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");
}
});
Infine, ecco una pagina html con lo script incorporato per il debug:
<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>
Se stai usando jQuery, allora che ne dici di questo codice breve e dolce -
$(document).mouseleave(function () {
console.log('out');
});
Questo evento si attiverà ogni volta che il mouse non si trova nella tua pagina come desideri. Basta cambiare la funzione per fare quello che vuoi.
E potresti anche usare:
$(document).mouseenter(function () {
console.log('in');
});
Si attiva quando il mouse torna nuovamente alla pagina.
Questo funziona per me:
addEvent(document, 'mouseout', function(evt) {
if (evt.toElement == null && evt.relatedTarget == null) {
alert("left window");
}
});
addEvent
?
if (!evt.toElement && !evt.relatedTarget)
Per rilevare l'uscita del mouse senza tenere conto della barra di scorrimento e del 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");
}
});
Spiegazione delle condizioni:
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
======================== EDIT ========================= ======
document.addEventListener ("mouseleave") sembra non essere attivato sulla nuova versione di firefox, mouseleave deve essere associato a un elemento come body o un elemento figlio.
Suggerisco di usare invece
document.body.addEventListener("mouseleave")
O
window.addEventListener("mouseout")
L'utilizzo dell'evento onMouseLeave previene il bubbling e consente di rilevare facilmente quando il mouse esce dalla finestra del browser.
<html onmouseleave="alert('You left!')"></html>
document.onmouseleave = function() { alert('You left!') };
usa not document.body che spara oltre le barre di scorrimento che riducono il corpo! Il codice per prevenire il fuoco sugli elementi non è necessario. Buona spiegazione: developer.mozilla.org/en-US/docs/Web/API/Element/…
Nessuna di queste risposte ha funzionato per me. Ora sto 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');
}
});
Lo sto usando per un widget per il caricamento di file drag and drop. Non è assolutamente preciso, viene attivato quando il mouse arriva a una certa distanza dal bordo della finestra.
Ho provato tutto quanto sopra, ma niente sembra funzionare come previsto. Dopo una piccola ricerca ho scoperto che e.relatedTarget è l' html appena prima che il mouse esca dalla finestra .
Quindi ... ho finito con questo:
document.body.addEventListener('mouseout', function(e) {
if (e.relatedTarget === document.querySelector('html')) {
console.log('We\'re OUT !');
}
});
Per favore fatemi sapere se trovate problemi o miglioramenti!
Aggiornamento 2019
(come user1084282 scoperto)
document.body.addEventListener('mouseout', function(e) {
if (!e.relatedTarget && !e.toElement) {
console.log('We\'re OUT !');
}
});
relatedTarget
è nullo quando il mouse lascia la finestra. Ispirato dalla risposta di @ user1084282, cambialo in questo: if(!e.relatedTarget && !e.toElement) { ... }
e funziona
if(!e.relatedTarget && !e.toElement)
posto della condizione nella risposta effettiva. Rileva che il mouse esce dal corpo del documento.
Riprendo quello che ho detto. È possibile. Ho scritto questo codice, funziona perfettamente.
window.onload = function() {
$span = document.getElementById('text');
window.onmouseout = function() {
$span.innerHTML = "mouse out";
}
window.onmousemove = function() {
$span.innerHTML = "mouse in";
}
}
funziona in chrome, firefox, opera. Non è stato testato in IE ma presumo che funzioni.
modificare. IE come sempre causa problemi. Per farlo funzionare in IE, sostituisci gli eventi dalla finestra al documento:
window.onload = function() {
$span = document.getElementById('text');
document.onmousemove = function() {
$span.innerHTML = "mouse move";
}
document.onmouseout = function() {
$span.innerHTML = "mouse out";
}
}
combinali per il rilevamento del cursore kick ass crossbrowser o0: P
applica questo css:
html
{
height:100%;
}
Ciò garantisce che l'elemento html occupi l'intera altezza della finestra.
applica questo jquery:
$("html").mouseleave(function(){
alert('mouse out');
});
Il problema con mouseover e mouseout è che se passi il mouse sopra / fuori da html a un elemento figlio, l'evento innescherà. La funzione che ho fornito non viene attivata quando si passa con il mouse su un elemento figlio. Viene attivato solo quando si sposta il mouse fuori / dentro dalla finestra
solo per farti sapere che puoi farlo quando l'utente posiziona il mouse nella finestra:
$("html").mouseenter(function(){
alert('mouse enter');
});
Ho provato uno dopo l'altro e ho trovato una risposta migliore al momento:
https://stackoverflow.com/a/3187524/985399
Salto i vecchi browser, quindi ho reso il codice più breve per funzionare sui browser moderni (IE9 +)
document.addEventListener("mouseout", function(e) {
let t = e.relatedTarget || e.toElement;
if (!t || t.nodeName == "HTML") {
console.log("left window");
}
});
document.write("<br><br>PROBLEM<br><br><div>Mouseout trigg on HTML elements</div>")
Qui vedi il supporto del browser
È stato piuttosto breve, ho pensato
Ma rimaneva ancora un problema perché "mouseout" si attiva su tutti gli elementi del documento .
Per evitare che ciò accada, usa mouseleave ( IE5.5 +). Vedi la buona spiegazione nel link.
Il codice seguente funziona senza attivare gli elementi all'interno dell'elemento che devono essere all'interno o all'esterno di. Prova anche a rilasciare il trascinamento all'esterno del documento.
var x = 0
document.addEventListener("mouseleave", function(e) { console.log(x++)
})
document.write("<br><br>SOLUTION<br><br><div>Mouseleave do not trigg on HTML elements</div>")
Puoi impostare l'evento su qualsiasi elemento HTML. document.body
Tuttavia, non attivare l'evento , poiché la barra di scorrimento di Windows potrebbe ridurre il corpo e attivarsi quando il puntatore del mouse si trova sopra la barra di scorrimento quando si desidera scorrere ma non si desidera attivare un evento mouseLeave su di essa. Impostalo document
invece su , come nell'esempio.
Forse se ascolti costantemente OnMouseOver nel tag body, richiama quando l'evento non si verifica, ma, come afferma Zack, potrebbe essere molto brutto, perché non tutti i browser gestiscono gli eventi allo stesso modo, ce ne sono anche alcuni possibilità che tu perda il MouseOver anche trovandoti sopra un div nella stessa pagina.
Forse questo aiuterebbe alcuni di quelli che verranno qui più tardi.
window.onblur
e document.mouseout
.
window.onblur
viene attivato quando:
Ctrl+Tab
o Cmd+Tab
.Fondamentalmente ogni volta che la scheda del browser perde il focus.
window.onblur = function(){
console.log("Focus Out!")
}
document.mouseout
viene attivato quando:
Ctrl+Tab
o Cmd+Tab
.Fondamentalmente in ogni caso quando il cursore lascia il documento.
document.onmouseleave = function(){
console.log("Mouse Out!")
}
window.onblur
Anche l' utilizzo intelligente . +1
$(window).mouseleave(function() {
alert('mouse leave');
});
Questo ha funzionato per me. Una combinazione di alcune delle risposte qui. E ho incluso il codice che mostra un modello solo una volta. E il modello scompare quando viene cliccato altrove.
<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>
var demo = document.getElementById('demo');
document.addEventListener("mouseout", function(e){demo.innerHTML="😞";});
document.addEventListener("mouseover", function(e){demo.innerHTML="😊";});
div { font-size:80vmin; position:absolute;
left:50%; top:50%; transform:translate(-50%,-50%); }
<div id='demo'>😐</div>