如何使用 mouseout/mouseleave 事件处理程序删除子菜单答案

【问题标题】：How do i remove the submenu using a mouseout/mouseleave event handler如何使用 mouseout/mouseleave 事件处理程序删除子菜单
【发布时间】：2014-05-16 06:54:50
【问题描述】：

我正在尝试为菜单项创建子菜单，我已经创建了一个项目列表并使用了鼠标悬停事件处理程序，但子菜单仍然存在。一旦鼠标离开子菜单 div，而不是标签 div，我需要将其删除。鼠标悬停功能有效，但鼠标悬停有问题。我是使用 javascript 和 DOM 的新手

这是代码（DOM）：

var creatbtndiv = document.createElement("div");
var creatbtn = document.createElement("button");
creatbtn.innerHTML = "Click Me";
var creatlbl = document.createElement("label");
creatlbl.innerHTML = "Hover Over Me ";

creatbtndiv.appendChild(creatlbl);
creatbtndiv.appendChild(creatbtn);

document.body.appendChild(creatbtndiv);



var list = function () {
    var creatDiv = document.createElement("div");
    creatDiv.id = "submenudiv";
    creatDiv.className = "submenudiv";

    var creatul = document.createElement("ul");
    for(index = 0; index < 5; ++index){
        li = document.createElement("li");
        li.className = "list";
        li.innerHTML = "Submenu" + index;
        creatul.appendChild(li);
    }

    creatDiv.appendChild(creatul);
    document.body.appendChild(creatDiv);
};
//If the cursor hovers over the label, activate this function//


creatlbl.onmouseover = function () {
    var alert = confirm("yes master");
    list();
};

creatDiv.onmouseout = function(){
    var confirm = confirm("the mouse is out");
    list.removeChild(creatDiv);
};

【问题讨论】：

标签： javascript list dom mouseover mouseout

【解决方案1】：

creatDiv 超出了它的范围，所以这个函数什么也不做：

creatDiv.onmouseout = function(){
    //var confirm = confirm("the mouse is out");
    list.removeChild(creatDiv);
};

你可以把这个函数放在后面：

document.body.appendChild(creatDiv);

creatDiv.onmouseout = function(){
    //var confirm = confirm("the mouse is out");
    this.parentNode.removeChild(this);
};

【讨论】：

【解决方案2】：

问题是'creatDiv' 在鼠标悬停事件发生之前不存在，因此会触发 list() 函数。

您不能将 onmouseout 事件附加到不存在的 creatDiv。

建议更改：

var list = function () {
  var creatDiv = document.createElement("div");
  creatDiv.id = "submenudiv";
  creatDiv.className = "submenudiv";

  var creatul = document.createElement("ul");
  for(index = 0; index < 5; ++index){
    li = document.createElement("li");
    li.className = "list";
    li.innerHTML = "Submenu" + index;
    creatul.appendChild(li);
  }

  creatDiv.appendChild(creatul);
  document.body.appendChild(creatDiv);

  creatDiv.onmouseout = function(){
    document.body.removeChild( this )
  };

};

不过，这仍然不太正确，因为当您在文本之间移动鼠标时，div 会消失，但这是另一个问题。

【讨论】：