javascript 函数仅在特定元素未被悬停时执行

Question

嗨，

我希望仅当#onlineusers 及其子项未悬停时才执行 js 代码。这是我的尝试：

document.getElementById("onlineusers").onmouseout  = function() { setInterval (loadusers, 5000);}

它不起作用，因为函数无论如何都会执行。

怎么了？

谢谢。

Answer 1

您之前的代码不起作用，因为如果用户的鼠标离开该元素，它会创建一个间隔，该间隔不再检查用户是否将鼠标悬停在该元素上。

相反，您可以通过检查元素是否匹配 :hover CSS 伪选择器来检查元素是否被悬停。这完全消除了监听 mouseout 事件的需要：

const toCheckIfHover = document.getElementById("demo");
setInterval(function(){
  if(!toCheckIfHover.matches(':hover')){
     console.log('not hovering over #demo');
  }else{
    console.log('hovering over #demo');
  }
}, 500)

#demo{
  width:100px;
  height:100px;
  border:1px solid;
  background-color:#ededed;
}

<div id="demo"></div>

javascript 函数仅在特定元素未被悬停时执行

javascript function only executed if certain element is NOT being hovered

javascript

hover