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

How do i remove the submenu using a mouseout/mouseleave event handler

本文关键字：删除 菜单 程序 事件处理 何使用 mouseout mouseleave      更新时间：2023-09-26

我试图为菜单项创建一子菜单，我已经创建了一个项目列表，并使用鼠标悬停事件处理程序，但子菜单只是留在那里。我需要它被删除，一旦鼠标清除从子菜单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);
};

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

问题是'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会消失，但这是另一个问题。

相关文章：