意外的ionicons行爲

Question

請考慮此code。 我不明白爲什麼它的行爲如此。我需要的是每當我點擊內部的<td>時，播放圖標與暫停圖標交替出現。當我點擊<td>內部但在圖標本身之外時，它的行爲與預期相同。然而，如果我點擊圖標本身，它第一次表現很好，然後停下來。

'ionicon包裝在<a>標籤中，該標籤是<td>元素的子標籤。事件監聽器位於<td>，那麼可能是什麼問題？

謝謝。

Answer 1

好了，想通了。它看起來像是從模板創建元素並實現mouseenter的方式產生的人工製品。

問題是mouseenter事件（hoverOn的一部分.hover()）在它不應該觸發時觸發。每次從模板創建一個新的ionicon時，如果光標稍微移動，它將觸發mouseenter事件。

mouseenter按理當元素出現時，因爲當一個聽衆元件或其後代懸停mouseenter應該觸發，然後僅當光標離開所有與事件相關聯的元素的呼叫應當不會被觸發，然後進入再次。我認爲這是從這樣的模板創建元素的人造物。也許這是因爲DOM得到更新，並且放棄了光標已經在元素中的事實。所以mouseenter再次觸發，並反過來觸發創建一個新的播放圖標。然後它重複..

這codepen應該解釋得很好。如果將鼠標懸停在播放按鈕上，則每次移動鼠標時，mouseenter計數器都會增加，因爲每次移動鼠標時都會創建一個新的播放按鈕。如果刪除創建新播放按鈕的行，則它的行爲與mouseenter相同，僅當光標進入元素時觸發。 （

Answer 2

當您點擊<a>標籤時，它似乎也觸發了父項<td>懸停事件。一旦解決方案嘗試下面的代碼懸停。

var hovOn = function(event) { 
     if(playOrPause==='play') { 

    $(this).html(pauseButtonTemplate); 
    playOrPause = 'pause'; 
    } else { 
    $(this).html(playButtonTemplate); 
    playOrPause = 'play'; 
    } 
}; 

Answer 3

正如@Vijai說你的問題懸停事件。而雖然我不知道很多關於你的項目，你真的需要.empty()懸停或你只需要hide()圖標..你可以試試這部分代碼，而不是你的

var hovOn = function(event) { 
    if($(this).find('a').length < 1){ 
    $(this).html(playButtonTemplate); 
    }else{ 
    $(this).find('a').show(); 
    } 
}; 
var hovOff = function(event) { 
    $(this).find('a').hide(); 
} 

Codepen Here