javascript - 悬停后 vbox 关闭的 menupopup(Firefox 扩展)

Question

            <menu id="list-menu" class="icon-list menu-iconic" label="Menu list">
                <menupopup>
                    <vbox flex="1" class="help">
                        <html:div class="help-text">
                            <label>Here is help text</label>
                        </html:div> 
                    </vbox>
                    <vbox flex="1" class="list" id="list-box">
                        Here is box with default height 300px;
                    </vbox>
                    <vbox flex="1">
                        <button class="button" value="Here is button" />
                        <button class="button" value="Here is button 2" />                          
                    </vbox>
                </menupopup>
            </menu> 

如果我将鼠标光标急剧移动到 menupopup 中的元素上，它就会关闭。如何解决？

提前致谢。

Answer 1

哦，我明白了，视频中没有看到，但这是一个当您的鼠标悬停在菜单项上时打开的子菜单。

.

因此，当您将鼠标悬停在“代理列表>”上时menuitem ，这将打开子menuitem ，现在想将鼠标从 menuitem 移开在打开的子菜单上，您必须小心地移动鼠标，使其悬停在“代理列表 >”menuitem 上。如果您的鼠标离开此“代理列表>”menuitem在它到达子menuitem之前比它会让你的子menuitem即使您的鼠标现在位于子 menuitem 上，也会消失。要解决此问题，如果鼠标位于子 menuitem 上方，则必须防止弹出窗口隐藏。 。我会在这里为你写一篇文章，我会去处理它。我的解决方案将执行 stopPropogation上popuphiding如果用户鼠标悬停在该面板上。 但是在这里发布此内容是为了让 @nmaier 可以了解您的问题是什么，也许他在我工作时有更好的想法。

<小时/>

好的，解决方案如下:在 overlay.xul添加了onmousenter onmouseleave ，和onmousedown像这样的属性:

<menupopup onmouseenter="Components.utils.reportError('entered');this.addEventListener('popuphiding', ProxyAddonBar.preventHide, false)" onmousedown="Components.utils.reportError('downed');this.removeEventListener('popuphiding', ProxyAddonBar.preventHide, false)" onmouseleave="Components.utils.reportError('left');this.removeEventListener('popuphiding', ProxyAddonBar.preventHide, false)">

然后在 overlay.js这个函数:

preventHide: function(e) {
    e.preventDefault();
    Components.utils.reportError('PREVENTED HIDE'); //you can remove this, this is just a debug message to tell you when it hides
}

现在这就是你想要的，你可以尝试从我的 fork 安装插件:https://github.com/Noitidart/firex/

编辑:好吧，我发现了你的第二个问题，即使我们实现了上述内容，它仍然隐藏着。现在发生的事情却恰恰相反。如果您小心地从“代理列表>”移动到子菜单，现在从这里您快速从子菜单移动到“代理列表>”，但是当您将鼠标悬停在“禁用代理”上时，它会隐藏它，这是正常的预期的行为，但如果你想阻止这种行为，我理解。忘记了stopPropogation我将编辑上面的代码。所以解决这个问题的方法是添加到 <menu>标记这些属性:onmouseenter="this.childNodes[0].addEventListener('popuphiding', ProxyAddonBar.preventHide, false)" onmouseleave="this.childNodes[0].removeEventListener('popuphiding', ProxyAddonBar.preventHide, false)"

在子菜单项内移动鼠标时，它还会触发错误的输入和左移事件。所以我通过检查 event.relatedTarget 来解决这个问题.

因此，结合上面的两个解决方案，在overlay.xul 中我们现在得到了这个:

    <menu id="proxy-list-menu" class="icon-list menu-iconic" label="&proxy-list;" onmouseenter="this.childNodes[0].addEventListener('popuphiding', ProxyAddonBar.preventHide, false)" onmouseleave="this.childNodes[0].removeEventListener('popuphiding', ProxyAddonBar.preventHide, false)">
<menupopup onmouseenter="if (!event.relatedTarget) { Components.utils.reportError('entered');this.addEventListener('popuphiding', ProxyAddonBar.preventHide, false) }" onmousedown="Components.utils.reportError('downed');this.removeEventListener('popuphiding', ProxyAddonBar.preventHide, false)" onmouseleave="if (!event.relatedTarget) { Components.utils.reportError('left');this.removeEventListener('popuphiding', ProxyAddonBar.preventHide, false) }">

<小时/>

向 @nmaier 提问。进行更改后，如果您将鼠标从“代理列表 >”子菜单项移开并意外悬停，但最终光标位于子 menuitem 上。它可以防止隐藏。如果您随后将鼠标移至“Disalbe Proxy”menuitem或“检查连接速度”，即使我已经删除了preventHide，它也不会隐藏子菜单项。功能。仅当您再次将鼠标悬停在“代理列表>”上时，它才会关闭。

如果您通过将鼠标悬停在“代理列表 >”上来打开子菜单，并小心地将鼠标移至打开的子菜单，而没有意外离开“代理列表 >”项目，那么一旦您到达子菜单项，则将其离开将鼠标悬停在“禁用代理”或“检查连接速度”上，它将在一秒钟后关闭。所以这是正常的隐藏行为，为什么当我阻止隐藏时，一旦我将鼠标悬停在这些其他标签上，它就不会像正常一样隐藏？