JavaScript的切換類子元素的內部點擊DIV鉻和Edge錯誤

Question

我有這個jsfiddle比如我建

此功能

for (o = 0; o < buttons.length; o++){ 
    buttons[o].addEventListener('click', function(e){ 
    e.target.childNodes[1].classList.toggle("clclp-dashbrd_frame-row-arrow-rotate"); 
    }); 
} 

不會在Chrome和邊緣正常工作。但在firefox和iE11中它確實有效。

它看起來在鉻/邊緣，當你點擊行或箭頭本身的文本時，箭頭不會翻轉，而點擊這些完美的作品。

Answer 1

只有當您直接點擊<i>圖標時，纔會出現此問題。在這種情況下，點擊事件仍然會觸發，但e.target是<i>而不是<button>，因此您的非常脆弱的e.target.childNodes[1]...中斷。

您可以通過使用e.currentTarget而不是e.target來解決此問題。

for (o = 0; o < buttons.length; o++){ 
    buttons[o].addEventListener('click', function(e){ 
     e.currentTarget.childNodes[1].classList.toggle("clclp-dashbrd_frame-row-arrow-rotate"); 
    }) 
}