Question

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

该函数更改目标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();
});

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

为什么会这样（不）发生？

Answer 1

您的内容div（#me）在HTML中最后设置（因此在DOM中），因此在向下滑动时它位于按钮顶部。

因此，一旦滑动动画开始，你就会从按钮中mouseout实际slideIt，这会根据你的代码移除#me {z-index: -10;}类，从而停止动画。

快速解决方法可能只是将您的内容div推到按钮下方（z-index-wise）：{{1}}

演示：http://codepen.io/anon/pen/vNvqYx

Javascript eventListeners没有触发

1 个答案: