如何使整個區域 <box> 在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/Manipulating_Lists

Answer 2

用戶可以通過多種方式在XUL中觸發command事件。 例如：用鼠標單擊元素，在焦點位於元素上時按默認的熱鍵（ 空格或Enter鍵），單擊元素的標簽 ，按元素或元素標簽的訪問鍵。 從您提出的問題來看，您實際上只對單擊元素本身感興趣，並且不需要command事件提供的所有其他可訪問性。 這意味着您可以簡單地監聽click事件：

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

例如，如果單擊元素，則可以觸發現有的<command>元素：

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