События Javascript в верхней части окна входят и уходят?

Question

Я ищу событие мыши, чтобы определить, когда мышь входит в верхнюю часть окна и выходит из окна. Я не имею в виду верхнюю часть веб-страницы, но верхнюю часть окна.

На странице, на которой я пытаюсь подключить событие, уже нет «элемента», но я думаю, что программное добавление невидимого фиксированного элемента html в начало страницы может быть в порядке.

Мне нравится метод customerY с onmousemove, но это будет срабатывать многократно, чего я не хочу - хочу только стрелять, чтобы войти и уйти. Не хотите, чтобы мой код обрабатывал несколько писем.

Это должно работать с ЛЮБОЙ веб-страницей. У меня нет контроля над HTML на странице (кроме элементов, которые я добавляю на страницу программно).

Нужна поддержка только современных браузеров, возможен самый простой способ, без jquery.

Этот метод отлично работает! Но это предотвращает щелчок позади него, что не совсем нормально.

(function(){   
var oBanana = document.createElement("div"); 
oBanana.style.position = "fixed" 
oBanana.style.top = "0" 
oBanana.style.left = "0" 
oBanana.style.height= "100px" 
oBanana.style.width = "100%" 
oBanana.addEventListener("mouseover", function(event) {alert('in');}); 
oBanana.addEventListener("mouseout", function(event) {alert('out');}); 
document.body.appendChild(oBanana); 
})(); 

Далее я попробовал это, что вставляет небольшую горячую зону в верхней части страницы. Я понял, что из-за моего сценария, я НЕ хочу вытаскивать мышью по горячей зоне - скорее, я хочу, чтобы наведение на все ниже, чем горячая зона. Вот моя первая попытка, но терпит неудачу, потому что HotZone получает событие тела, плюс срабатывает событие тела несколько раз:

(function(){   
var oHotzone = document.createElement("div"); 
oHotzone.id = "fullscreen-hotzone" 
oHotzone.style.position = "fixed" 
oHotzone.style.top = "0" 
oHotzone.style.left = "0" 
oHotzone.style.height= "10px" 
oHotzone.style.width = "100%" 
oHotzone.addEventListener("mouseover", function(event) {alert('hotzone');}); 
document.body.appendChild(oHotzone); 
document.body.style.marginTop = "10px" 
document.body.addEventListener("mouseover", function(event) {alert('body');}); 
})(); 

Цените любую помощь! Thx!

Answer 1

Это самый простой способ, с помощью которого можно сделать ванильный javascript.

Функция:

// create a one-time event 
function onetime(node, type, callback) { 

    // create event 
    node.addEventListener(type, function(e) { 
     // remove event 
     e.target.removeEventListener(e.type, arguments.callee); 
     // call handler 
     return callback(e); 
    }); 
} 

Реализация:

// one-time event 
onetime(document.getElementById("hiddenTopElement"), "mouseenter", handler); 
onetime(document.getElementById("hiddenTopElement"), "mouseleave" , hanlder); 

// handler function 
function handler(e) { 
    alert("You'll only see this once!"); 
} 

Answer 2

мой OP мог бы, вероятно, было сказано лучше, но я доволен этим решением. Фиксированный div заблокировал события наведения на теле внизу, поэтому событие наведения тела не произойдет, пока мышь не покинет горячую зону. Отлично.

// create hotzone and add event 
var oHotzone = document.createElement("div"); 
oHotzone.id = "fullscreen-hotzone" 
oHotzone.style.position = "fixed" 
oHotzone.style.top = "0" 
oHotzone.style.left = "0" 
oHotzone.style.height= "10px" 
oHotzone.style.width = "100%" 
oHotzone.addEventListener("mouseenter", function(event) {alert('hotzone');}); 
document.body.appendChild(oHotzone); 

document.body.addEventListener("mouseenter", function(event) {alert('body');});