适用于 chrome 但不适用于 firefox、Eventlistener、appendChild 和 style.backgroundColor答案

【问题标题】：works with chrome but not with firefox, Eventlistener, appendChild and style.backgroundColor适用于 chrome 但不适用于 firefox、Eventlistener、appendChild 和 style.backgroundColor
【发布时间】：2015-09-10 10:15:52
【问题描述】：

我玩过 js 并试图让用户选择背景颜色。我的脚本首先将数组中的所有颜色显示为 div 加上一个按钮，然后您可以单击一个按钮将此颜色应用为背景颜色。
它适用于我的 Chrome，但不适用于 Firefox。我犯了一个巨大的错误吗？

<html>
<head><meta charset=utf-8></head>
<body onload="always()" id="body">
</body>
<script>
all_colors = ["#FFFF00","#FF00FF","#00B3FF",]

function always(){  
    for  (i=0; i< all_colors.length; i++){  
        var e = document.createElement("div"); 
        e.id="box"+(i);
        e.style.backgroundColor = all_colors[i];
        document.getElementById("body").appendChild(e);
        var btn = document.createElement("BUTTON");
        btn.id = (i);
        var t = document.createTextNode(i);
        btn.appendChild(t);         
        e.appendChild(btn);         
    }
}  
document.addEventListener("click",function(){myfunc()})

function myfunc(){
    var el=document.activeElement;
    var i=el.id;
    choose_bg(i);
}

function choose_bg(i){
    document.getElementById("body").style.backgroundColor = all_colors[i]
}

</script>
</html>

经过一些测试，问题可能是在 Chrome 中正常工作但在 FF 或 Safari 中无法正常工作的“actve 元素”。顺便说一句，我使用的是 Mac，在我的 Android FF 上它可以工作！也许有人知道解决方案...

【问题讨论】：

我测试了你的代码，它在 Firefox 中运行良好。我真的不能说你的代码有什么问题，也许你的 Firefox 版本已经过时了？？
也适合我。
您是否在 FF 中遇到任何控制台错误？
我使用的是FF 38.0.5，任何地方都没有显示错误。
我在 myfunc() 中设置了一个 alert(el)。在 chrome 中它响应 [html 按钮元素]，但在 Firefox 中它总是说 [html body element]，所以它没有得到按下的按钮...

标签： javascript html css macos addeventlistener

【解决方案1】：

如果您怀疑您的 FF 版本中存在错误，您可以尝试使用以下代码来避免调用“activeElement”：

<html>
<head><meta charset=utf-8></head>
<body onload="always()" id="body">
</body>
<script>
all_colors = ["#FFFF00","#FF00FF","#00B3FF",]

function always(){  
    for  (i=0; i< all_colors.length; i++){  
        var e = document.createElement("div"); 
        e.id="box"+(i);
        e.style.backgroundColor = all_colors[i];
        document.getElementById("body").appendChild(e);
        var btn = document.createElement("BUTTON");
        btn.id = (i);

        btn.addEventListener("click", myfunc);

        var t = document.createTextNode(i);
        btn.appendChild(t);
        e.appendChild(btn);
    }
}  

function myfunc(event){
    var eventSource = event.target || event.srcElement;
    var i = eventSource.id;
    choose_bg(i);
}

function choose_bg(i){
    document.getElementById("body").style.backgroundColor = all_colors[i]
}

</script>
</html>

【讨论】：

你太棒了！那行得通..我做了一个更复杂的解决方法，用文本输入替换按钮，这些按钮看起来像除 chrome 之外的所有浏览器的按钮:)