香草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取消鼠標延遲

回答

相關問題