嵌套的弹出窗口，与弹出窗口事件的麻烦 [英] Nested popups, trouble with popupshowing event

问题描述

我正在开发一个Firefox扩展，并且我有一个工具栏按钮，它显示了一个覆盖层，在这个覆盖层中我在 ToolbarDisplayManager 中放置了一些XUL代码：

$ b

 < overlay id =custombutton-overlayxmlns =http://www.mozilla.org/keymaster/gatekeeper/there.is.only .xul> 
 
< toolbarpalette id =BrowserToolbarPalette> 
< toolbarbutton id =boycottToolbarButtonlabel =Labeltooltiptext =Labeltype =menupopup =ToolbarPopup/> 
< / toolbarpalette> 
< popupset> 
< panel id =ToolbarPopupposition =after_startonpopupshowing =Refresh（）;> 
< vbox class =ToolbarBody> 
< box id =ToolbarDisplayManager/> 
< / vbox> 
< / panel> 
< / popupset> 
< / overlay> 
  

在ToolbarDisplayManager里面我用menupopup创建了一个menulist（就像一个combobox这个结构：

 < menulist id =combo> 
< menupopup> 
< menuitem> 
< menuitem> 
 ... 
< / menupopup> 
< / menulist> 
  

下面是问题：
当我点击 ToolbarPopup 我在 popupshowinging 事件中运行刷新功能。但是，当叠加显示，我点击组合选择一个项目，弹出事件 ToolbarPopup 被再次发射。
换句话说，就像两个弹出窗口相互之间有麻烦。



我需要在叠加之前运行刷新功能被显示。我的结构是错的吗？如何处理两个嵌套弹出窗口和它们的 popupshowing 事件？

解决方案

popupshowing 事件冒泡起来，这意味着它可以被DOM层次结构中高于触发事件的元素的事件处理程序拦截。所以你的事件处理程序首先从< panel> 接收 popupshowinging 事件，然后再从< menulist> 元素（因为它位于< panel> 内部）。您可以使用 event.eventPhase 属性：
$ b

 < panel ... onpopupshowing = if（event.eventPhase == Event.AT_TARGET）Refresh（）;> 
  

这将确保您忽略冒泡事件，只调用 Refresh ）用于发生在< panel> 本身的事件。另一种选择是查看 event.target 属性。

I'm developing a Firefox extension, and I have a toolbar button that displays an overlay in which I put some XUL code inside ToolbarDisplayManager:

<overlay id="custombutton-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

        <toolbarpalette id="BrowserToolbarPalette">
            <toolbarbutton id="boycottToolbarButton" label="Label" tooltiptext="Label" type="menu" popup="ToolbarPopup" />
        </toolbarpalette>
        <popupset>
            <panel id="ToolbarPopup" position="after_start" onpopupshowing="Refresh();">
                <vbox class="ToolbarBody">
                    <box id="ToolbarDisplayManager" />
                </vbox>
            </panel>
        </popupset>
</overlay>

Inside "ToolbarDisplayManager" I create a menulist with a menupopup with javascript (like a "combobox") with this structure:

<menulist id="combo">
    <menupopup>
        <menuitem>
        <menuitem>
        ...
    </menupopup>
</menulist>

Here's the problem: When I click ToolbarPopup I run a "Refresh" function in the popupshowing event. But when the overlay is displayed, and I click on the "combo" to select an item, the popupshowing event of ToolbarPopup is fired again. In other words: it's like the two "popups" are having troubles with each other.

I need to run the "Refresh" function just before the overlay is shown. Is my structure wrong somewhere? How do I handle two nested popups and their popupshowing events?

解决方案

The popupshowing event bubbles up meaning that it can be intercepted by event handlers higher in the DOM hierarchy than the element triggering the event. So your event handler first receives the popupshowing event from the <panel> and later another one from the <menulist> element (because it is located inside the <panel>). You can easily distinguish the two cases using the event.eventPhase property:

<panel ... onpopupshowing="if (event.eventPhase == Event.AT_TARGET) Refresh();">

This will make sure that you ignore events bubbling up and only call Refresh() for events that originated in the <panel> itself. The other option would have been looking at the event.target property.

这篇关于嵌套的弹出窗口，与弹出窗口事件的麻烦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！