[英]MouseOut Event from ONLY the top
我正在嘗試使用 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 來自元素頂部時觸發?
您可以檢查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"> </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"> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.