仅顶部的 MouseOut 事件

Question

I am trying to use the mouseOut event handler, but I want to restrain the event to fire when the mouse exits from the TOP ONLY——not from the right, left or bottom.

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

What can I add to make it only fire when the mouseOut is from the top of my element ?

Answer 1

You can check if clientY is smaller than the offsetTop from your element.
Only if the mouse cursor leaves on the top, this is the case

 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>

---

edit

non arrow function for 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>