Question

我想构建一个JS库，所以我没有使用任何jQuery。这是纯JavaScript。

我在鼠标输入特定元素后创建了一个div，然后在刚创建的div中显示一些信息，鼠标离开后，信息将消失。

鼠标输入部分工作正常，显示正确的文本和CSS样式，但是当移出鼠标时，它只会第一次运行该功能。第一次尝试后，创建的div将停留在那里忽略mouseleave功能。

这是JS代码

        document.getElementById(id).addEventListener("mouseenter", function(){
            var elemDiv = document.createElement('div');
            elemDiv.id ="demo";
            document.body.appendChild(elemDiv);
            elemDiv.innerHTML = "something";
        }, false);


        document.getElementById(id).addEventListener("mouseleave", function(){

            document.getElementById("demo").innerHTML="";

        }, false);

之前我尝试过其他方法，它给出了相同的结果

        document.getElementById(id).onmouseenter = function(){...}
        document.getElementById(id).onmouseleave = function(){...}

Answer 1

在每个“mouseenter”上创建一个新元素，但永远不会删除它。在“mouseleave”上你只删除第一个的内容，第二个（第三个，......）仍在那里并保留其内容。

您可能应该在事件处理程序之外创建元素，并且只更改“innerHTML”。或者你从DOM上的“mouseLeave”中删除它。

Answer 2

您正在创建具有相同ID的多个元素，然后使用document.getElementById进行查询。这具有不可预测的浏览器结果（通常是第一个返回） - 您需要确保对于DOM中的每个ID，仅存在一个 ID。

考虑到这一点，你的mouseenter函数实际上已被破坏，因为当它需要确定是否已存在时，它会创建相同div的额外副本。

document.getElementById(id).addEventListener("mouseenter", function(){
// Find the 'demo' div
var elemDiv = document.getElementById('demo');
// If it doesn't exist, create a div, give it the unique ID 'demo' and add it to the DOM'
if (!elemDiv) {
    elemDiv = document.createElement('div');
    elemDiv.id = 'demo';
    document.body.appendChild(elemDiv);
}
// Whether it was already on the DOM or had to be created, the text is reset.
elemDiv.innerHTML = "something";

}，false）;

请参阅我的JSFiddle以获取完整示例：http://jsfiddle.net/ckned3mx/6/

Answer 3

在每个mouseenter事件中，您创建的新元素具有相同的id="demo"，这是无效的HTML（ID应该是唯一的）。

然后在mouseleave .getElementById()函数将返回使用该ID找到的第一个元素，该ID是由第一个mouseenter创建的。

这意味着您最终会得到多个不会被清理的demo元素。

您应该重复使用相同的元素（如果已存在则不创建它）或删除mouseleave上的元素。

Answer 4

这是一个演示：

http://jsfiddle.net/hxzgpdoz/

我在mouseenter事件函数中做了一些更改：

            var elemDiv = document.getElementById("demo");
            if( elemDiv ){
                elemDiv.innerHTML = "something";
            }else{
                elemDiv = document.createElement('div');
                elemDiv.id ="demo";
                document.body.appendChild(elemDiv);
                elemDiv.innerHTML = "something";
            }

onmouseenter / onmouseleave在JavaScript库中

4 个答案: