Я хочу мати змогу виявити, коли миша виходить з вікна, щоб я міг зупинити події від запуску, поки миша користувача знаходиться в іншому місці.
Будь-які ідеї, як це зробити?
Я хочу мати змогу виявити, коли миша виходить з вікна, щоб я міг зупинити події від запуску, поки миша користувача знаходиться в іншому місці.
Будь-які ідеї, як це зробити?
Відповіді:
Цей тип поведінки зазвичай бажаний під час реалізації поведінки перетягування на HTML-сторінці. Наведене нижче рішення було протестовано на IE 8.0.6, FireFox 3.6.6, Opera 10.53 та Safari 4 на машині MS Windows XP.
Спочатку невелика функція від Петра-Пола Коха; крос-обробник подій браузера:
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
А потім скористайтеся цим методом, щоб приєднати обробник подій до об'єктів документа в події mouseout:
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");
}
});
Нарешті, ось HTML-сторінка із вбудованим сценарієм для налагодження:
<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>
Якщо ви використовуєте jQuery, то як щодо цього короткого та солодкого коду -
$(document).mouseleave(function () {
console.log('out');
});
Ця подія запускається, коли миша не буде на вашій сторінці, як вам хочеться. Просто змініть функцію, щоб робити все, що завгодно.
І ви також можете використовувати:
$(document).mouseenter(function () {
console.log('in');
});
Для запуску, коли миша знову повернеться на сторінку.
Це працює для мене:
addEvent(document, 'mouseout', function(evt) {
if (evt.toElement == null && evt.relatedTarget == null) {
alert("left window");
}
});
addEvent
?
if (!evt.toElement && !evt.relatedTarget)
Для того щоб виявити миші, не враховуючи смугу прокрутки та поле автозаповнення або перевірити:
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");
}
});
Пояснення умов:
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") не запускається в новій версії Firefox, миші потрібно приєднати до такого елемента, як body або дочірній елемент.
Я пропоную використовувати замість цього
document.body.addEventListener("mouseleave")
Або
window.addEventListener("mouseout")
Використання події onMouseLeave запобігає барботу та дозволяє легко виявити, коли миша залишає вікно браузера.
<html onmouseleave="alert('You left!')"></html>
document.onmouseleave = function() { alert('You left!') };
Використовуйте не document.body, що запускає смуги прокрутки, які стискають тіло! Код для запобігання пожежі на елементах не потрібен. Хороше пояснення: developer.mozilla.org/en-US/docs/Web/API/Element/…
Жодна з цих відповідей не працювала для мене. Зараз я використовую:
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');
}
});
Я використовую це для віджету для завантаження файлів перетягування. Це не зовсім точно, бо спрацьовує, коли миша потрапляє на певну відстань від краю вікна.
Я спробував усе вищесказане, але, здається, нічого не працює, як очікувалося. Після невеликого дослідження я виявив , що e.relatedTarget є HTML тільки перед мишею виходить з вікна .
Отже ... я закінчила це:
document.body.addEventListener('mouseout', function(e) {
if (e.relatedTarget === document.querySelector('html')) {
console.log('We\'re OUT !');
}
});
Будь ласка, повідомте мене, якщо ви знайдете якісь проблеми або вдосконалення!
Оновлення 2019 року
(як з'ясував користувач1084282)
document.body.addEventListener('mouseout', function(e) {
if (!e.relatedTarget && !e.toElement) {
console.log('We\'re OUT !');
}
});
relatedTarget
є нульовим, коли миша залишає вікно. Натхненний відповіддю @ user1084282, змініть це на це: if(!e.relatedTarget && !e.toElement) { ... }
і воно працює
if(!e.relatedTarget && !e.toElement)
замість умови фактичну відповідь. Він виявляє, як миша покидає тіло документа.
Я беру назад, що я сказав. Можливо. Я написав цей код, працює чудово.
window.onload = function() {
$span = document.getElementById('text');
window.onmouseout = function() {
$span.innerHTML = "mouse out";
}
window.onmousemove = function() {
$span.innerHTML = "mouse in";
}
}
працює в хромі, фаєрфоксі, опері. Aint тестується в IE, але припустимо, він працює.
редагувати. IE як завжди викликає неприємності. Щоб він працював в IE, замініть події з вікна на документ:
window.onload = function() {
$span = document.getElementById('text');
document.onmousemove = function() {
$span.innerHTML = "mouse move";
}
document.onmouseout = function() {
$span.innerHTML = "mouse out";
}
}
комбінуйте їх для виявлення курсору крос-броусера o0: P
застосувати цей css:
html
{
height:100%;
}
Це гарантує, що html-елемент займає всю висоту вікна.
застосувати цей jquery:
$("html").mouseleave(function(){
alert('mouse out');
});
Проблема з мишанням та виведенням миші полягає в тому, що якщо ви переходите / вимикаєте html до дочірнього елемента, це призведе до початку події. Функція, яку я дав , не відключається під час спілкування з дочірнім елементом. Він відключається лише тоді, коли ви виходите з миші у вікно
лише для того, щоб ви знали, що ви можете це зробити, коли користувач мишиться у вікні:
$("html").mouseenter(function(){
alert('mouse enter');
});
Я спробував один за одним і знайшов найкращу відповідь на той час:
https://stackoverflow.com/a/3187524/985399
Я пропускаю старі браузери, тому я скорочував код для роботи в сучасних браузерах (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>")
Тут ви бачите підтримку браузера
Це було досить коротко, я думав
Але проблема як і раніше залишається, оскільки "миші" викликають усі елементи документа .
Щоб цього не сталося, використовуйте миші (IE5.5 +). Дивіться хороше пояснення за посиланням.
Наступний код працює без запускання елементів всередині елемента, які знаходяться всередині або зовні. Спробуйте також перетягнути випуск за межами документа.
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>")
Ви можете встановити подію на будь-який HTML-елемент. Не майте жодної події document.body
, тому що панель прокрутки Windows може скоротити тіло і загорітися, коли вказівник миші перестане смугу прокрутки, коли ви хочете прокрутити, але не бажаєте запускати події миші. Встановіть його document
замість цього, як у прикладі.
Можливо, якщо ви постійно слухаєте OnMouseOver у тезі body, тоді зворотний виклик, коли подія не відбувається, але, як заявляє Зак, це може бути дуже некрасиво, оскільки не всі браузери поводяться з подіями однаково, є навіть деякі ймовірність того, що ви втратите MouseOver, навіть перебуваючи над дівом на одній сторінці.
Можливо, це допоможе дехто з тих, хто приїде сюди пізніше.
window.onblur
і document.mouseout
.
window.onblur
спрацьовує, коли:
Ctrl+Tab
або Cmd+Tab
.В основному в будь-який час, коли Вкладка браузера втрачає фокус.
window.onblur = function(){
console.log("Focus Out!")
}
document.mouseout
спрацьовує, коли:
Ctrl+Tab
або Cmd+Tab
.В основному в будь-якому випадку, коли курсор залишає документ.
document.onmouseleave = function(){
console.log("Mouse Out!")
}
window.onblur
також. +1
$(window).mouseleave(function() {
alert('mouse leave');
});
Це працювало для мене. Тут є комбінація деяких відповідей. І я включив код, що показує модель лише один раз. І модель згасає, коли клацнути деінде.
<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>