javascript - 处理JavaScript中显示对话框/模式的最有效方法是什么？

[更新：]这是测试链接（如果您不想克隆存储库）http://jsfiddle.net/integralist/g9EPu/

将鼠标悬停在Web应用程序中的某些链接上时，我需要显示很多对话框/模式。

目录（tl; dr）

我以前是怎么做的
我最近如何尝试过
哪个更好？
那mouseenter / leave呢？

我以前是怎么做的

我通常这样做的方法是使用事件委托。

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

通常，我有一个对话框，可以更改其内容并重新定位（保存有许多不同的HTML标记）。

如果触发了鼠标悬停事件（用于链接），则显示对话框。

如果（链接的）mouseout事件被触发，那么我将隐藏对话框。

如果我将鼠标移出触发事件处理程序的链接，那么通常我需要设置一个计时器以延迟隐藏对话框（足够长的时间），这样我就可以将鼠标悬停在对话框上，该对话框本身将清除由鼠标移出链接设置的计时器。

然后，我将mouseout事件绑定到对话框，因此当用户将鼠标滑出对话框时，可以隐藏对话框。

在此阶段，我遇到了两个问题，第一个问题几乎一直发生，另一个是我最近注意到的一个极端情况，促使我尝试寻找更好的解决方案...

对话框的子元素数为“ x”，将鼠标移到子元素上会导致触发对话框的mouseout事件，因此我需要进行检查以查看元素是否具有父元素（即对话框本身）以及是否因此，请勿尝试隐藏对话框。
在

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

我最近如何尝试过

有关示例代码，请参见：https://github.com/Integralist/Mouse-Over-Out-Script（您应该能够克隆存储库并在本地运行index.html文件以查看发生了什么）

但是给一个简短的解释...

我们将mousemove事件绑定到document.documentElement元素（但是您可以根据需要在document.body上进行此操作），然后存储鼠标位置的x / y坐标。我们提供对“检查”方法的公共api访问，该方法使我们知道鼠标的位置是否在提供给“检查”的元素上（我们测量元素尺寸并将其添加到其x / y坐标上）。

在上面的仓库中，我们有一个日历，每当特定日期发生事件时，该日历就会显示一个对话框。我们将存储具有事件的所有

，并为每个

设置一个计时器（这是因为我们需要继续调用'check'方法以查看该

将鼠标放在其上）。

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

这个示例仓库现在可以正常工作，因为我使用事件委托的第一个版本没有。

哪个更好？

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

那mouseenter / leave呢？

我知道这些事件存在，并且如果所有浏览器都支持，那么我可以安全地使用第一个版本，而不必检查导致触发错误的mouseout / over事件的子元素。但是，不管我不相信这会解决事件日历中的示例，其中事件鼠标过快移动意味着

的鼠标移出/移出事件不是由浏览器触发的。无论哪种方式，我都知道您可以对此进行填充，因为jQuery提供了mouseenter / leave事件，但是通过查看它们的代码，我无法使它适用于我的脚本（因为我不使用jQuery或任何其他通用库-ps，并且我不希望这样做，因此请不要建议这样做。

非常感谢别人可以为我提供的任何帮助/建议或指导。

亲切的问候，
标记

最佳答案

对话框的子元素数为“ x”，将鼠标移到子元素上会导致触发对话框的mouseout事件，因此我需要进行检查以查看元素是否具有父元素（即对话框本身）以及是否因此，请勿尝试隐藏对话框。

解决此问题的方法：在事件代码中，只需使用函数“ isAncestor”（请参见下文）

/*
 * element = the "target" in your mouseout event handler
 * other = the node you really want to check if you're over
 */
isAncestor: function(element, other)
{
    while ( element && element != other ) element = element.parentNode;
    return ( element != null && element != undefined );
}

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

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

关于javascript - 处理JavaScript中显示对话框/模式的最有效方法是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8338820/

10-10 00:19