javascript - 仅顶部的 MouseOut 事件

Question

我正在尝试使用 mouseOut 事件处理程序，但我想限制该事件在鼠标从顶部退出时触发，而不是从右侧、左侧或底部退出。

var executed = false;

function mouseoutHandler(e){
  window.removeEventListener("mouseout", mouseoutHandler, false);
    executed = true;
    document.getElementById(“element”).style.width = "300px";
}

function runOnce() {
  window.addEventListener("mouseout", mouseoutHandler, false);
};


runOnce();

我可以添加什么来使其仅在 mouseOut 位于元素顶部时触发？

Answer 1

您可以检查 clientY 是否小于元素的 offsetTop。
只有当鼠标光标离开顶部时，才会出现这种情况

const myElement = document.getElementById('element');
var executed = false;

const mouseoutHandler = (e) => {
  if(e.clientY <= myElement.offsetTop) {
    myElement.style.width = '100px';
    executed = true;
    myElement.removeEventListener('mouseout', mouseoutHandler);
  }
}

myElement.addEventListener('mouseout', mouseoutHandler, false);

body{height:100vh;display:flex;justify-content:center;align-items:center}#element{width:200px;height:100px;background:#333}

<div id="element">&nbsp;</div>

---

编辑

IE 的非箭头函数

var myElement = document.getElementById('element');
var executed = false;

function mouseoutHandler(e) {
  if(e.clientY <= myElement.offsetTop) {
    myElement.style.width = '100px';
    executed = true;
    myElement.removeEventListener('mouseout', mouseoutHandler);
  }
}

myElement.addEventListener('mouseout', mouseoutHandler, false);

body{height:100vh;display:flex;justify-content:center;align-items:center}#element{width:200px;height:100px;background:#333}

<div id="element">&nbsp;</div>