javascript - 在动态创建子项的mouseover子项时阻止onmouseout

Question

我已经阅读了很多关于类似主题的帖子，所有帖子都非常出色，而且我学到了很多东西，但是我仍然不能令我的代码令人满意。

我有一个带有许多按钮的菜单栏。当我鼠标悬停其中的3个时，一些javascript动态地为每个按钮创建一个下拉菜单。

当我完全按下按钮或完全退出菜单栏时，我会清除下拉菜单。

显然，当我将鼠标移到下拉列表上时，我不希望这个下拉列表被清除。

但当然onmouseout事件会触发并清除此菜单。

我可以看到用于类似问题的各种方法。但是这些都不起作用，我认为这是因为当侦听器被分配给父级时，div和dl创建的地方显然不存在。因此，尽管添加到dom中的html将下拉放置在侦听器的范围内，但它仍然假定发生了mouseout事件。

我试图通过为成功添加的动态内容添加侦听器来进行纠正，但我仍然无法阻止鼠标悬停在鼠标悬停之前触发。

Answer 1

设置计时器并在鼠标悬停在生成的菜单上清除它。

document.getElementById("menu").onmouseout = function(e){   
    window.to = setTimeout(function(){
        // remove the submenu
    },20)
}

document.getElementById("submenu").onmouseover = function(e){   
    clearInterval(window.to)
}