如何在同一個元素上啓動另一個eventListener？

我在js中創建了一些圖庫作爲練習。我發現一個錯誤，我不知道如何解決它。如何在同一個元素上啓動另一個eventListener？

上的jsfiddle的全部代碼 - > Code

背景

我添加兩個事件偵聽到我的IMG包裝，包裝看起來像這樣：

<div class="gallery-item"> <-- wrapper 
<img src=""> <-- image 
<div> <-- overlay 
</div> 
</div>

和聽衆像那樣（我在創建js中的包裝器時添加的監聽器）：

imageWrapper.addEventListener('mouseenter', enableOverlay, false); 
imageWrapper.addEventListener('mouseleave', disableOverlay, false);

監聽器調用函數，這些函數負責在圖像上顯示重疊。其中第一個顯示疊加淡入淡出效果，第二個隱藏效果相同。

enableOverlay

function enableOverlay(e) { 
    var el = this.childNodes[1].style; 
    el.display = 'block'; 
    (function fadeIn() { 
     if (el.opacity < 1) { 
      el.opacity = parseFloat(el.opacity) + Number(0.1); 
      setTimeout(fadeIn, 30); 
     } 
    }()); 
}

disableOverlay

function disableOverlay(e) { 
    var el = this.childNodes[1].style; 
    (function fadeOut() { 
     if (el.opacity > 0) { 
      el.opacity = parseFloat(el.opacity) - Number(0.1); 
      setTimeout(fadeOut, 30); 
     } else { 
      el.display = 'none'; 
     } 
    }()); 
}

問題

乍一看一切都很好，如果我慢慢圖像移動鼠標 - 一個函數結束（不透明度= 1）a第二個開始，直到不透明度= 0。但是，當我將鼠標移動到圖像上時，疊加層開始閃爍 - 不透明度增加和減少0.1（IIFE中的值）和腳本循環。

當我想通了，這種行爲的原因是，enableOverlay這麼想的光潔度（el.opacity這麼想的達到1），並在同一時間disableOverlay開始。我不知道如何解決這種情況。

我試圖用標誌來處理它，它代表衰落函數的狀態並打斷IFFE，但它沒有幫助。

長話短說，任何人都可以幫助我解決這個問題，或給我一種解決問題的方法嗎？

編輯

在我看來，我的問題是「如何在一個事件監聽停止功能，當另一個事件監聽器被觸發。」改變不透明度只是一個例子。

來源

2016-12-30 feamor

有沒有你不使用CSS什麼特別的原因變換爲你的不透明度的變化？ –

我知道我可以使用CSS，但在這一個我想使用JS，因爲這個代碼是我的某種練習。如果我不知道如何以正確的方式在js中執行此操作，我將使用css – feamor

剛添加了一個屬性來跟蹤事件。 Fiddle

function disableOverlay(e) { 
    var el = this.childNodes[1].style; 
    var that = this.childNodes[1]; 
    that.setAttribute('op','fadeOut'); 
    (function fadeOut() { 
     if (el.opacity > 0 && that.getAttribute('op')==='fadeOut') { 
      el.opacity = parseFloat(el.opacity) - Number(0.1); 
      setTimeout(fadeOut, 30); 
     } else { 
      el.display = 'none'; 
     } 
    }()); 
}

來源

2016-12-30 12:19:19 gvmani

謝謝，如果認爲這是我的情況最簡單的方法 – feamor

您可以使用css轉換。

function enableOverlay(e) { 
 
    var el = this.childNodes[1].style; 
 
    el.opacity = '1'; 
 
} 
 

 
function disableOverlay(e) { 
 
    var el = this.childNodes[1].style; 
 
    el.opacity = '0'; 
 
}

.gallery-item img+div { 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    -webkit-transition: opacity .3s ease; 
 
    -moz-transition: opacity .3s ease; 
 
    -o-transition: opacity .3s ease; 
 
    -ms-transition: opacity .3s ease; 
 
    transition: opacity .3s ease; 
 
}

https://jsfiddle.net/zjqpxzmj/

來源

2016-12-30 11:08:45 Ruddch

我想使用js，因爲這是我的目標，這對我來說是很好的體驗。我認爲問題不在於這種情況（如何更改不透明度），但是如何在另一個eventlistener啓動時在一個eventlistener中停止函數 – feamor

如何在兩個eventListeners上使用setInterval並將其清除爲一個，如果另一個啓動？ – Ruddch

你可以打電話給我更多關於這個或者告訴我一些snippset？因爲我不知道你的腦子裏到底有什麼與交易 – feamor

在你的情況，捕捉最新的setTimeout和調用它clearTimeout從其它功能應該有所幫助。

來源

2016-12-30 11:45:55 Orangesandlemons

謝謝你，這是幫助！現在一切正常。我從enableOverlays fadeIn函數和disableOverlay中的clearTimeout中捕獲setTimeout，因爲我想每次淡出覆蓋。 – feamor

如何在同一個元素上啓動另一個eventListener？

回答

相關問題