如何訪問正確的XUL標度更改值

Question

我正在構建一個'經典'Firefox XUL覆蓋擴展。 在這個擴展中，我想要包含一個XUL scale元素 。

如果用戶更改了滑塊的位置，我正在嘗試讀出scale元素的更新值。 但是，我無法獲得更新的值 - 該值始終保持在起始位置。

^{<編輯>
需要注意的一件重要事情是，您需要經典主題恢復器附加組件 ，並激活View > Toolbars > Add-on Bar （適用於Firefox 29+），以使我的測試用例顯示在狀態欄元素中，因為該附加組件的附加欄可恢復狀態欄。
</編輯>}

slider/chrome/content/slider.xul是：

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<?xml-stylesheet type="text/css" href="slider.css"?>
<overlay id="overlay-slider" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/x-javascript" src="slider.js"/>
  <statusbar id="status-bar">
    <scale id="slider" width="200" movetoclick="true" increment="10"/>
  </statusbar>
</overlay>

slider/chrome/content/slider.js是：

var Logger = {
  log: Application.console.log
}

var Slider = {
  onChange: function( event ) {
    // keeps giving me 0, in stead of the updated value
    Logger.log( document.getElementById( 'slider' ).value );
  }
}

var onWindowLoad = function( event ) {
  window.removeEventListener( 'load', onWindowLoad, false );

  var slider = document.getElementById( 'slider' );
  slider.addEventListener( 'change', Slider.onChange, false );
}

window.addEventListener( 'load', onWindowLoad, false );

似乎scale元素表現得相當不穩定，因為我也嘗試將xUL textbox元素添加到xul疊加層，如下所示：

...
<scale id="slider" width="200" movetoclick="true" increment="10"/>
<textbox id="slider-value" readonly="true" observes="slider"/>
...

在這種情況下， textbox相應更新，我可以將其用作代理，通過更改相關的javascript來讀取scale值，以：

// changed 'slider' to 'slider-value'
Logger.log( document.getElementById( 'slider-value' ).value );

但是，當我向scale元素添加min ， max （和可能的其他）屬性時， textbox元素也不會再更新，並且會一直保持min 。

我還嘗試了一些從onchange事件訪問數據的變體，這些變量被傳遞給事件處理程序，如：

Logger.log( event.value );
Logger.log( event.target.value );
Logger.log( event.target._sliderElement.value );
Logger.log( event.currentTarget.value );
... etc.

在檢查事件的各種屬性時，我還注意到_userChanged屬性保持為false ，當我希望這是true ，因為scale沒有以編程方式改變，而是由用戶改變。

這些錯誤是否在scale元素中？ 或者我在這里遺漏了一些重要信息，以便讀出正確的值？

---

^{我正在使用擴展代理文件的擴展代理文件 -no-remote -P development參數在Firefox的實例中測試擴展，在Mac OS X 10.6.8和Xubuntu 14.04上（盡管我懷疑這是相關的）。}

---

<編輯>
在閱讀了Noitidart的回答之后，我做了一些測試，發現在狀態欄元素中覆蓋scale元素似乎是我遇到問題的原因。 如果我覆蓋我的scale並直接在附加工具欄或經典主題修復程序附加工具的附加工具欄中觀察textbox元素，則所有工作都按預期工作，如下所示：

 <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="chrome://global/skin/"?> <?xml-stylesheet type="text/css" href="slider.css"?> <overlay id="overlay-slider" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="slider.js"/> <toolbar id="ctraddon_addon-bar"> <!-- or: id="ctraddon_extra-bar" --> <scale id="slider-simple" class="slider" movetoclick="true" increment="10"/> <textbox id="slider-simple-textbox" class="textbox" readonly="true" observes="slider-simple"/> <scale id="slider-complex" class="slider" movetoclick="true" increment="10" min="20" max="80"/> <textbox id="slider-complex-textbox" class="textbox" readonly="true" observes="slider-complex"/> </toolbar> </overlay> 

</編輯>

Answer 1

好的，我能夠將日志記錄修復到控制台。 它恰當地獲得了價值。 我不得不使用.getAttribute('value')而不是.value 。

var Slider = {
  onChange: function( event ) {
    // read the slider value
    Logger.log( event.target.id + '.value = ' + event.target.getAttribute('value') );

    // try to read the associated textbox value (as a proxy to the slider value)
    var textBox = document.getElementById( event.target.id + '-textbox' );
    Logger.log( textBox.id + '.value = ' + textBox.getAttribute('value') );
  }
}

但現在奇怪的是，即使值正在更新， slider-complex文本框也不會更新。

我不知道的人，我抬頭對MDN的observes屬性，並不能找到任何信息。

<scale id="slider-simple" class="slider" movetoclick="true" increment="10"/>
<textbox id="slider-simple-textbox" class="textbox" readonly="true" observes="slider-simple"/>

<scale id="slider-complex" class="slider" movetoclick="true" increment="10" min="20" max="80"/>
<textbox id="slider-complex-textbox" class="textbox" readonly="true" observes="slider-complex"/>

observes="slider-complex"對我來說是新的。 從來不知道，你能解釋一下嗎，你在哪里找到了這個？ 生病了更新mdn，也許我可以幫助你更多。

奇怪的是， slider-simple在使用.value控制台日志記錄中正常工作，並且文本框也適當更新。 真奇怪。 slider-simple控制台日志記錄也適用於.getAttribute('value')所以我們只需要弄清楚復雜的一個。 如果我從complex-slider刪除min和max屬性它工作正常，但我無法解釋這一點，奇怪的是正在進行。

MDN滑塊頁面顯示值為ATTRIBUTE： https ： //developer.mozilla.org/en-US/docs/XUL/Attribute/value

對於這些元素，setAttribute（“value”，myValue）和getAttribute（“value”）不訪問或影響顯示給用戶的內容。

它在文本框中有一個值PROPERTY，用於顯示值。