javascript - Firefox bug - 选项在悬停时消失

Question

当我在 mouseenter 事件上插入选择框时，Firefox 出现了一个错误。悬停时整个下拉列表消失。我该如何修复这个错误？

document.querySelector('#test').addEventListener('mouseenter',function(){
    this.innerHTML = '<select><option value=1>2</option><option value=2>3</option></select>';
});

#test{
    width: 100px;
    height: 100px;
    background-color: #000;
}

<div id="test"></div>

Answer 1

这是另一种方法，我们可以将其附加到 <div>元素。在此示例中，mouseenter可能会触发很多，所以我将这段代码包装在一个闭包中以执行一次以演示附加一次。您当然可以根据您的需要进行设计，但这种方法应该比覆盖元素的 html 提供更多的功能

JSFiddle Link

var append = (function(ele, node) { // execute once closure
    var executed = false;
    return function (ele, node) {
        if (!executed) {
            executed = true;
            ele.appendChild(node);
        }
    };
})();

document.querySelector('#test').addEventListener('mouseenter', function() {
    var that = this;
    var node = document.createElement('select');
    node.innerHTML = '<option value=1>2</option><option value=2>3</option>'
    append(that, node);
});