香草Javascript，没有jQuery取消鼠标延迟

我目前有一个问题。我正在使用CSS隐藏和显示元素，具体取决于鼠标功能。我的一个元素（导航箭头）取决于其他一些东西。我现在需要一个cancleable定时器函数，它可以计算mouseleave上的2秒，然后更改class属性。但它应该有一个计时器，立即取消鼠标悬停。我不希望它太早消失。下面我的代码与我到目前为止尝试。我不知道如何访问setIntervall的当前时间。我很乐意尝试使用Date.now（）。但是现在我希望一些极客能够帮助我。香草Javascript，没有jQuery取消鼠标延迟

在此先感谢。

function hideElementOnMouseOut(el) 
{ 
    el.addEventListener("mouseleave", function(event) 
    { 
     mySlideAction = setInterval(function() 
     { 

     }, 1000); 
    } 
}

来源

2017-01-16 Sascha Grindau

您可以在mouseleave函数初始化间隔和清除mouseover功能这个区间，这将阻止执行它的功能。

查看下面的代码片段。

function hideElementOnMouseOut(el) 
 
{ 
 
    var interval; 
 
    
 
    el.addEventListener("mouseleave", function(event) 
 
    { 
 
     el.innerHTML = 'mouse out'; 
 
     interval = setInterval(function() 
 
     { 
 
      el.innerHTML = 'time out'; 
 
      el.className = 'out'; 
 
     }, 1000); 
 
    }); 
 
         
 
    el.addEventListener("mouseover", function(event) 
 
    { 
 
     el.innerHTML = 'mouse in'; 
 
     el.className = ''; 
 
     if(interval) {    
 
      clearInterval(interval); 
 
     } 
 
    }); 
 
    
 
} 
 
         
 
hideElementOnMouseOut(document.getElementById("element"));

#element { 
 
    display: block; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
} 
 

 
#element.out { 
 
    background: blue; 
 
}

<div id="element"></div>

来源

2017-01-16 19:52:16

香草Javascript，没有jQuery取消鼠标延迟

回答

相关问题