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);
});

Answer 2

我无法在Chrome中选择一个值，因此我认为这不仅仅是一个Firefox错误。

无论如何，这是一个修复。只需在鼠标输入时未加载选择时加载选择。

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

firefox bug - 选项在悬停时消失

2 个答案:

JSFiddle Link