Javascript事件侦听器未启动

我试图让所有的按钮在点击时都像第一个按钮一样。 基本上，它只是在单击时调用一个函数

该函数更改目标div的innerHtml，添加Css动画类，然后删除mouseout上的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();
});

函数声明（）{
document.getElementById（“me”）.innerHTML=“我是一个函数声明，我
提升到代码的顶端，你
你能在我回来之前给我打电话吗
我看起来像这样：
函数声明（）{}
";
document.getElementById（“me”）
.classList.add（“slideIt”）；
document.getElementById（“FN声明”）
.addEventListener（'mouseout'，function（）{
document.getElementById（“me”）
.classList.remove（“slideIt”）；
});
}
document.getElementById（“fnDeclaration”）.addEventListener（“单击”，函数（）{
声明（）；
});

为什么会发生这种情况？

您的内容div（

#me

）是在HTML中设置的最后一个（因此在DOM中），因此它在向下滑动时位于按钮上方

因此，当向下滑动动画开始时，您实际上会从按钮中执行

mouseout

，这会根据您的代码删除

slideIt

类，从而停止动画

一个简单的解决方法是将content div按到按钮下方（z-index-wise）：

#me{z-index:-10；}

---

演示：

@Azzi它在帖子中，是一个指向codepen的链接，以前没有正确显示：-）这很有趣，我从来没有想过，但是，它仍然不起作用。只有第一个按钮的反应是它应该的。嗯，这是最奇怪的，对我来说，在你的链接中，第一个按钮添加动画并删除MousOut上的Css动画类，第二个和最后一个按钮只在单击时更改innerHTML，但没有动画。以防万一，我更新了代码笔，在按钮上指定了一个

z-index

，以确保它们位于

#me

之上……现在试试看。你使用的浏览器/版本是什么？我刚刚试过，还是一样。我正在使用Chrome 46.0.2490.80，现在正在更新它，并且将尝试FF。它在FF中工作，但在Chrome中不工作（更新）。这是神秘的：——）