什么'；用JavaScript显示对话框/模式的最有效方法是什么？

[更新：]这里有一个测试链接（如果您不想克隆repo）

我有很多对话框/模态，当鼠标在web应用程序的某些链接上移动时需要显示

目录（tl；dr）

• 我以前是怎么处理的
• 我最近是怎么尝试的
• 哪个更好
• 那滑鼠呢

我以前是怎么处理的 我通常的做法是使用事件委托

因此，我向容器添加一个事件处理程序，然后检查相关元素是否成为目标，然后显示相关对话框

我通常会有一个对话框，我会更改其中的内容并重新定位（保存大量不同的HTML标记）

如果触发了

mouseover

事件（用于链接），则显示对话框

如果触发了

mouseout

事件（用于链接），则我将隐藏该对话框

如果我触发了事件处理程序的链接的

mouseout

，那么我通常需要设置一个计时器来延迟隐藏对话框（刚好足够长），这样我就可以将鼠标移到对话框上，对话框本身会清除链接的

mouseout

设置的计时器

然后，我将一个

mouseout

事件绑定到该对话框，以便在用户将鼠标从对话框上滚下时隐藏该对话框

在这个阶段我遇到了两个问题，第一个问题几乎一直都在发生，另一个是我最近注意到的一个边缘案例，这促使我尝试找到更好的解决方案

对话框有“x”个子元素，将鼠标滚动到子元素上会触发对话框的

mouseout

事件，因此我需要检查元素是否有一个父元素，即对话框本身，如果是，则不要试图隐藏对话框

在元素上使用此技术时，我发现当鼠标移动过快时，mouseout/over事件不会被触发

我最近是怎么尝试的 例如，请参阅代码：（您应该能够克隆repo并在本地运行index.html文件以查看发生了什么）

但简单的解释一下

我们将

mousemove

事件绑定到

document.documentElement

元素（但如果需要，可以在document.body上执行），然后存储鼠标位置的x/y坐标。我们提供了对“检查”方法的公共API访问，该方法让我们知道鼠标的位置是否在我们提供给“检查”的元素上（我们测量元素尺寸并将其添加到其x/y坐标上）

在上述回购协议中，我们有一个日历，每当特定日期发生事件时，它都会显示一个对话框。我们正在存储所有具有事件的，并为每个事件设置一个计时器（这是因为我们需要不断调用“check”方法来查看是否有鼠标在上面）

因此，可能会有31+的机会（因为我们正在显示下个月的前几天）显示对话框，因此设置了31+计时器

这个示例repo现在可以工作了，而我使用事件委托的第一个版本没有

哪个更好？ 我担心

mousemove

版本的性能，因为它可能会使用很多计时器（取决于一个页面中需要多少对话框）。在我上面的日历示例中，最多可以运行31个以上的计时器

那滑鼠呢？ 我知道这些事件存在，如果所有浏览器都支持，那么我可以安全地使用第一个版本，而不必检查导致错误mouseout/over事件触发的子元素。但不管怎样，我不相信这会修复事件日历的示例，在该示例中，移动鼠标太快意味着的鼠标移出/覆盖事件不是由浏览器触发的。无论采用哪种方式，我知道您可以在jQuery提供mouseenter/leave事件的情况下多填充这些内容，但查看它们的代码时，我无法让它们对我的脚本起作用（因为我不使用jQuery或任何其他通用库-ps，我也不希望这样做，所以请不要建议将其作为选项）

非常感谢有人能为我提供的任何帮助/建议或指导

对话框有“x”个子元素，在子元素上滚动鼠标会触发对话框的mouseout事件，因此我需要检查元素是否有一个父元素，即对话框本身，如果是，则不要试图隐藏对话框

要解决这个问题：在事件代码中，只需使用函数“isAncestor”（见下文）

因此，在元素的mouseout代码（我们称之为“itemElement”）中，您可以像这样检查它：

//We're really mousing out, close dialog
if ( !isAncestor( mouseOutEvent.target, itemElement ) )
{
    ...do something ...
}

对话框有“x”个子元素，在子元素上滚动鼠标会触发对话框的mouseout事件，因此我需要检查元素是否有一个父元素，即对话框本身，如果是，则不要试图隐藏对话框

要解决这个问题：在事件代码中，只需使用函数“isAncestor”（见下文）

因此，在元素的mouseout代码（我们称之为“itemElement”）中，您可以像这样检查它：

//We're really mousing out, close dialog
if ( !isAncestor( mouseOutEvent.target, itemElement ) )
{
    ...do something ...
}

---

与其要求我们制作您的文件的本地副本来测试问题，为什么不在link上为我们设置它或使用link更新它，但这里再次说明一点，以防您错过它：您可以重新构造HTML吗？如果给定的events section/div元素是其关联的calendar date元素的子元素，则可以简化鼠标悬停事件管理。如果你不能在JS运行之前改变HTML，你会考虑改变它以达到同样的目的吗？@ THEGEKE，我故意使用一个弹出来处理所有的事件，因为另一种选择是将31个弹出的元素（所有HTML）加载到页面中。