Событие JavaScript, когда мышь оставляет окно браузера [дубликат]
В конце settings.py у меня есть следующее:
try:
from settings_local import *
except ImportError:
pass
Таким образом, если я хочу переопределить настройки по умолчанию, я должен просто поместить settings_local.py прямо рядом с settings.py.
6 ответов
СВОДКА: Это можно сделать чисто, проверив свойство relatedTarget во время события mouseout. Если relatedTarget не является дочерним по отношению к документу, то мышь просто покинула окно. Это легко сделать самому, но если вы не хотите, некоторые библиотеки (Mootools, будущий прототип ...) имеют встроенную функциональность, а другие (текущий прототип) имеют расширения. В IE вместо этого вы можете использовать mouseleave, которая не является пузырьковой версией mouseout.
Подробности:
IE имеет события, называемые mouseenter и mouseleave, которые являются не всплывающими версиями mouseover и mouseout. Другие браузеры этого не делают, но если бы они это сделали, установка прослушивателя mouseleave для окна или документа могла бы помочь.
Джентльмен по имени Кен Снайдер приходит на помощь:
При наведении курсора мыши relatedTarget свойство ссылается на узел из на который пришел указатель. При наведении курсора мыши ссылки на свойство relatedTarget узел, на который перешел указатель. любое событие, область действия - узел для к которому прикрепляется событие. relatedTarget не является дочерним элементом currentTarget, событие наведения мыши эквивалентно событию mouseenter и событие mouseout эквивалентно событие mouseleave.
- http://kendsnyder.com/archives/6-MouseEnter-and-MouseLeave.html
Это позволяет реализовать mouseenter и mouseleave в других браузерах. Фактически, Кен предоставляет для этого тот же код прототипа: http://kendsnyder.com/sandbox/enterleave/MouseEnterLeave.js
Дурот указал в комментариях, что MooTools уже включает нечто подобное. (Спасибо, Дурот.) Похоже, что предстоящий выпуск Prototype (1.6.2) может включать эту функцию, но я не могу найти ничего определенного.
Использование только javascript, без прототипа или jquery и т. д.
<html>
<head>
<script type="text/javascript">
var mouseX = 0;
var mouseY = 0;
var counter = 0;
var mouseIsIn = true;
function wireEvent() {
window.addEventListener("mouseout",
function(e){
mouseX = e.pageX;
mouseY = e.pageY;
if ((mouseY >= 0 && mouseY <= window.innerHeight)
&& (mouseX >= 0 && mouseX <= window.innerWidth))
return;
//do something for mouse out
counter++;
mouseIsIn = false;
document.getElementById('in_out').innerHTML='out' + counter;
},
false);
window.addEventListener("mouseover",
function(e){
if(mouseIsIn)
return;
//do something for mouse over
counter++;
mouseIsIn = true;
document.getElementById('in_out').innerHTML='in' + counter;
},
false);
}
</script>
</head>
<body onload="wireEvent();">
<div id="in_out"> </div>
<div style="width:300px; height: 200px; background: red;">Dummy element</div>
</body>
</html>
ОБНОВЛЕНИЕ:
Добавлена проверка положения мыши на mouseout , срабатывающая при перемещении элементов внутрь / из тела. Если он находится внутри окна, событие mouseout не запускается.
Также введен флаг для текущего состояния мыши «внутри» или «вне» с помощью mouseIsIn . Если это истина , mouseover также не сработает.
Вы можете использовать событие onmouseout в окне вместо
Проблема возникает из-за того, что события mouseout генерируются для элементов внутри окна, которые затем всплывают, как описано в спецификации событий W3C . Вы можете проверить, на каком элементе действительно было запущено событие:
function mouseoutFunction(event) {
event = event || window.event;
var sender = event.srcElement || event.target;
}
Возможно, вы можете установить прослушиватель для mouseover и mouseout , документа , body или какого-либо другого элемента, который охватывает весь документ, и использовать его (by сохранение того, что это произошло) в качестве триггера, чтобы определить, является ли это действительным наведением указателя мыши на окно?
Если это не удается, ваша первая идея (относительно проверки положения) должна работать довольно хорошо. Любое событие проходит по X / Y, когда событие произошло. Если это что-то большее, чем высота / ширина окна, вы оставили фактическое окно. Если что-то отрицательное, вы покинули окно. И, возможно, если это именно высота / ширина или точно top: 0 или left: 0, то вы покинули окно.
Вот мое решение, основанное на таймере. Таймер здесь в основном используется, чтобы дать шанс другим обработчикам событий (в частности, onmouseover) выполнить, прежде чем решить, что объект находится вне окна. Тайм-аут в 1 мс (на самом деле около 33 мс, есть минимальное разрешение таймера) дает немного времени для выполнения наведения курсора мыши, если он еще не произошел.
var inWin=0;
window.onmouseout = function(e)
{
inWin--;
setTimeout(checkIfOut, 1);
}
window.onmouseover = function(e)
{
inWin++;
}
function checkIfOut()
{
if(!inWin)
{
//Yay! Mouse is out of the window (probably)
}
}