Javascript eventListeners not firing

Question

Я пытаюсь заставить все кнопки делать то же самое по щелчку, что и первая кнопка. В принципе, это просто вызов функции при нажатии.

Эта функция изменяет innerHtml целевого div, добавляет класс анимации Css, а затем удаляет анимацию Css для мыши.

Это работает именно так, как я хочу его на первой кнопке, но не на второй и на последнюю.

function declaration() { 
    document.getElementById("me").innerHTML = "I am a function declaration and i     
    hoist to the top of the code, you 
    can call me before i get 
    declared.I look like this: <br> function declaration() {} 
    "; 
    document.getElementById("me") 
     .classList.add("slideIt"); 
    document.getElementById("fnDeclaration") 
     .addEventListener('mouseout', function() { 
      document.getElementById("me") 
       .classList.remove("slideIt"); 
     }); 
} 
document.getElementById("fnDeclaration").addEventListener("click", function() { 
    declaration(); 
}); 

http://codepen.io/damianocel/pen/xwJmwN

Почему это (не) происходит?

Answer 1

Ваш контент div (#me) настроен последним в HTML (следовательно, в DOM), поэтому он сидит поверх ваших кнопок при сползании вниз.

Поэтому вы на самом деле mouseout со своей кнопки, как только начинается анимация сползания вниз, которая в соответствии с вашим кодом удаляет класс slideIt, следовательно останавливает анимацию.

Быстрое исправление может быть просто толкать содержание DIV вниз (г-индекс-накрест) ваши кнопки: #me {z-index: -10;}

Демо: http://codepen.io/anon/pen/vNvqYx