如何将的整个区域设为在 XUL 中可点击？

Question

尝试学习一些 XUL，但有点卡住了。首先建立一个非常基本的专辑列表。

假设我有这个框 - 歌曲列表开始隐藏，但我想在单击主 albuminfo 框时显示它。

<box align="left" class="album"  id="test" orient="vertical">
    <box class="albumInfo" ><description value="Album 1" class="albumName"/><label class="albumArtist" value="Album artist 1"/></box>
    <box><label value="Year of release"/><label value="Genre"/></box>

    <listbox align="left" class="songlist" collapsed="true">
        <listitem label="Song 1"/>
        <listitem label="Song 2"/>
        <listitem label="Song 3"/>
        <listitem label="Song 3"/>
        <listitem label="Song 5"/>
    </listbox>
</box>

单击整个 albuminfo 框区域时如何触发 Javascript 命令？我可以很好地使用按钮，但我真的想让整个框区域都可单击。

Answer 1

您可以在 XUL 中通过多种方式完成此操作。既然您要求通过单击按钮来实现这一点，那么您就可以：

    <?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<box align="left" class="album"  id="test" orient="vertical">
    <box class="albumInfo" ><description value="Album 1" class="albumName"/>
<label class="albumArtist" value="Album artist 1"/>
</box>
    <box><label value="Year of release"/><label value="Genre"/></box>

    <listbox align="left" class="songlist" collapsed="true" id="listBox" >
        <listitem label="Song 1"/>
        <listitem label="Song 2"/>
        <listitem label="Song 3"/>
        <listitem label="Song 3"/>
        <listitem label="Song 5"/>
    </listbox>
</box>
<row><button label="Album Info" oncommand="Open();"/> </row>

<script type="application/x-javascript">
<![CDATA[
   function Open()
{
document.getElementById('listBox').setAttribute("collapsed", "false");

}

]]>
</script>

</window>

当您单击按钮时，您将获得专辑信息！

如果没有，您可以使用此选项，当您单击框上的任意位置时，列表框将打开，只需稍微更改上面的内容即可。

<box align="left" class="album"  id="test" orient="vertical" onclick="OpenInfo()">

function OpenInfo()
{
alert('hi');
document.getElementById('listBox').setAttribute("collapsed", "false");

}

您可以通过多种方式操作列表。如需更多参考，请查看此链接：https://developer.mozilla.org/en/XUL_Tutorial/Manipulated_Lists

Answer 2

用户可以通过多种方式触发XUL中的command事件。例如：用鼠标单击元素，当焦点位于元素上时按默认热键（Space 或 Enter 按钮），单击元素的标签，按元素或元素标签的访问键。从您的问题的声音来看，您实际上只对元素本身上的鼠标单击感兴趣，并且不需要 command 事件提供的所有其他可访问性。这意味着您可以简单地监听 click 事件：

<box class="albumInfo" onclick="...">

例如，如果单击元素，您可以触发现有的 元素：

<box class="albumInfo" onclick="document.getElementById('album-info-command').doCommand();">