为什么 select 不下降？

Question

我试图在悬停时更改 <div> 的内容。但是，在执行此操作时，我遇到了 select 没有下降的问题。如何纠正这个？ appendChild() 方法可能会解决问题，但我正在尝试仅使用 .innerHTML .

<div id = "navigation" onmouseover = "navigationAnimate()">
Fun
</div>

<script>
function navigationAnimate() {
    navigation.innerHTML = "<select>  <option>Finance</option> <option>Health</option><option>Fun</option><option selected>Maths</option><option>Conveters</option><option>Chronology</option><option>Sciences</option><option>Miscellaneous</option></select>";
}
</script>

Answer 1

问题是 mouseover 事件在您将鼠标悬停在 children 上时不断触发，并且每次都更改 children。基本上它会在尝试使用它时一遍又一遍地替换 children。

例如，如果您在第一个 mouseover 事件上删除事件侦听器，它将设置一次并完成。

<div id = "navigation" onmouseover = "navigationAnimate()">
Fun
</div>

<script>
function navigationAnimate(){
    navigation.innerHTML = "<select>  <option>Finance</option> <option>Health</option><option>Fun</option><option selected>Maths</option><option>Conveters</option><option>Chronology</option><option>Sciences</option><option>Miscellaneous</option></select>";
    navigation.onmouseover = '';
}
</script>

附带说明一下，我建议研究使用 addEventListener，而不是事件属性；它更加灵活。

Answer 2

`因为每次将光标移动到 #navigation 块下时，它都会更改内容。更改内容后需要删除属性"onmouseover"；

<div id = "navigation" onmouseover = "navigationAnimate()">
Fun
</div>

<script>
function navigationAnimate(){

navigation.innerHTML = "<select>  <option>Finance</option> <option>Health</option><option>Fun</option><option selected>Maths</option><option>Conveters</option><option>Chronology</option><option>Sciences</option><option>Miscellaneous</option></select>";
navigation.removeAttribute('onmouseover');
}

</script>

https://jsfiddle.net/Lz49m7ko/

Answer 3

这里的问题是您调用了 javascript 的 onMouseOver 事件函数，因此当您的鼠标在您的 div 或内容上移动时它会不断调用该函数。

这里我尝试使用条件来克服它并修改你现有的代码。希望它对你有用。祝你好运。

<div id="navigation" onmouseover="navigationAnimate();">
 Fun
</div>

<script>
var flag = true;
function navigationAnimate(){
 if(flag){
    flag = false;
    navigation.innerHTML = "<select><option>Finance</option> <option>Health</option><option>Fun</option><option selected>Maths</option><option>Conveters</option><option>Chronology</option><option>Sciences</option><option>Miscellaneous</option></select>";
    }
}
</script>

为什么 select 不下降？

Why doesn't the select drops down?

html

javascript

dom

dom-events