onmouseenter / onmouseleave In a JavaScript Library

onmouseenter / onmouseleave In a JavaScript Library

本文关键字：JavaScript Library In onmouseleave onmouseenter      更新时间：2023-09-26

我想建立一个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(){...}

在每个"mouseenter"中创建一个新元素，但不能删除它。在"mouseleave"上，你只删除第一个的内容，第二个(第三个，…)仍然存在并保留其内容。

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

您正在创建具有相同ID的多个元素，然后使用document.getElementById进行查询。这将导致不可预测的浏览器结果(通常返回第一个)—您需要确保DOM中的每个ID只有一个 ID。

考虑到这一点，你的mouseenter函数实际上是坏的，因为当它需要确定一个div是否已经存在时，它会创建相同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";

},假);

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

在每个mouseenter事件中，您都使用相同的id="demo"创建一个新元素，该元素是无效的HTML (ID应该是唯一的)。

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

这意味着你最终有多个demo元素没有被清理。

您应该重新使用相同的元素(如果它已经存在就不要创建它)或者删除mouseleave上的元素

下面是一个Demo:

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";
            }
相关文章：