0

我的任务是在弹出的子菜单面板中实现文件上传表单。我正在使用 XmlHttpRequest，因此在收到文件加载完成/失败的事件状态之前，保持该弹出窗口打开很重要。Onmouseover和onmouseout事件用于显示/隐藏弹出窗口。在“隐藏”时，弹出面板与 DOM 分离，不能再用作 XHR 事件的侦听器。

当我单击表单的“浏览”按钮时，会在浏览器上方打开一个系统对话窗口。在 Windows 中的 IE、Chrome 和 Firefox 中，系统对话框禁用按页面处理的事件。这意味着如果您将鼠标光标移出页面元素之一的对话框窗口，该页面将不会执行任何操作，例如对mouseOver/mouseOut事件做出反应。不幸的是，如果在 Mac 上使用 Chrome/Firefox（Safari 可以），页面元素会在鼠标悬停/移出时做出反应。我的弹出菜单关闭（由于mouseOut弹出的事件处理程序）-> XHR 响应未正确管理。

假设必须在弹出窗口中有一个上传表单，那么在系统上传文件对话框窗口打开时保持该面板/表单可见的可能方法是什么？可能是 Mac 特定的解决方案。

示例代码可以在这里看到http://jsfiddle.net/xqvXG/

4

1 回答 1

0

通过冻结弹出面板并用透明 div（“玻璃”）覆盖整个页面来解决此问题。

如果用户选择文件并开始上传，我会移除玻璃并使用 XHR 函数解冻弹出窗口readyStateChangeHandler（或者可以在load事件处理程序中执行此操作）。

如果用户在系统对话框窗口中单击“取消”或使用“X”按钮将其关闭 - 没有事件传递到页面并且“玻璃”保留在屏幕上。然后，对“玻璃”的任何点击都会将其移除并解冻（或简单地隐藏）弹出菜单。

如果按下取消/关闭，则需要“玻璃”来制作一个单击点（面板）以解冻弹出窗口。我不会说这是一个完美的解决方案（有时需要额外的操作），但非常接近我想要的。

于 2012-09-18T23:20:46.653 回答