窗口顶部的 Javascript 事件进入和离开？答案

【问题标题】：Javascript events on top-of-window enter and leave?窗口顶部的 Javascript 事件进入和离开？
【发布时间】：2015-08-26 22:23:19
【问题描述】：

我正在寻找一个鼠标事件来检测鼠标何时进入窗口顶部并离开窗口顶部。我不是指网页的顶部，而是窗口的顶部。

我试图将事件附加到的页面上没有预先存在的“元素”，但我认为以编程方式将不可见的固定 html 元素添加到页面顶部可能没问题。

我喜欢使用 onmousemove 的 clientY 方法，但它会重复触发，我不想要 - 只想在进入和离开时触发。不希望我的代码必须处理多次触发。

这应该适用于任何网页——我无法控制页面上的 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 获取了 body 事件，加上 body 事件反复触发：

(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');});
})();

感谢任何帮助！谢谢！

【问题讨论】：

标签： javascript window onmouseover onmouseout

【解决方案1】：

这是您可以使用 vanilla 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!");
}

【讨论】：

请帮助初学者了解如何为鼠标进入和离开事件进行设置。谢谢回复！
我在实现中添加了两行：onetime(document.getElementById("hiddenTopElement"), "mouseenter", handler); onetime(document.getElementById("hiddenTopElement"), "mouseleave" , 处理程序);
太棒了！我在这里设置：好的，我在这里设置：jsfiddle.net/wq0maj79/1 但我希望它每次都触发，而不仅仅是一次。（当我说我不想要多次触发时，我说的是每次移动鼠标时 mousemove 是如何触发的，即使你仍然将鼠标悬停在同一个元素上）。哦，我明白了，我可以删除 removeEventListener
越来越近：jsfiddle.net/wq0maj79/4 现在需要在页面加载时向页面添加元素...
我为您制作了一个更简单的版本，这很有效。为什么你的更好？ jsfiddle.net/vycc7zro/4

【解决方案2】：

我的 OP 可能会说得更好，但我对这个解决方案很满意。固定的 div 阻止了下面 body 上的悬停事件，因此在鼠标离开热区之前不会发生 body hover 事件。完美。

// 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');});

【讨论】：