14

新しいMutation Observer機能を使用して、選択ボックス (またはネストされたoption要素)への変更を監視しようとしています。ただし、「setAttribute」のみがミューテーションオブザーバーのコールバックをトリガーしています。

私が使用しているコードは次のとおりです。

~function(doc, $) {
    var select = $('select');

    // http://www.w3.org/TR/dom/#mutation-observers
    var observer = new WebKitMutationObserver(function(mutations) {
        alert(mutations.length + " mutations happened");
    });

    observer.observe(select, {
        // monitor descendant elements – changing `selected` attr on options
        subtree: true,
        attributes: true
    });

    // this triggers Observer's reaction, but doesn't update select box UI
    select.setAttribute('value', 'whee'); 
    // this updates select box UI, but doesn't trigger mutation observer's callback
    select.value = "whee";
    // this also updates the UI, but doesn't trigger mutation observer's callback
    select.getElementsByTagName('option')[0].selected = true;
    //
    // neither does manual selecting of options trigger mutation observer unfortunately :(

    button.addEventListener('click', function(e) {
        e.preventDefault();
        // my goal is to react to this change here 
        select.value = Math.random() > .5 ? "whee" : "whoa";
    }, false);

}(document, function(selector) { return document.querySelector(selector); });​

そして、これが実際のこのコードですhttp://jsfiddle.net/gryzzly/wqHn5/

selected属性 ( on<option>またはvalueon ) の変更に反応したいと思います<select>。オブザーバーが反応しない理由についての提案は大歓迎です!

Mac OS X の Chrome 18.0.1025.168 でこれをテストしています。もちろん、製品コードにmozはコンストラクターのプレフィックスとプレフィックスのないバージョンも含まれます。これはテスト コードです。

アップデート。

Firefox Nightly でもコードをテストしたところ、Chrome や Chrome Canary と同じように動作します。両方のブラウザのバグを埋めました:

この問題が煩わしい場合は、これらのバグにコメントして投票してください。

4

1 に答える 1

4

@ gryzzly、詳細な応答でChromiumのバグを更新しました：http ：//code.google.com/p/chromium/issues/detail？id = 128991＃c4

ミューテーションオブザーバーは、DOMのシリアル化された状態の監視に限定されています。Mutation Observersが何かを観察できるかどうかを知りたい場合は、要素のinnerHTML出力を確認してください。生成されるマークアップの変更に反映された状態の変化を確認できれば、MutationObserversはそれについて聞くことができるはずです。

TL; DR：これは意図したとおりに機能しています。HTMLSelectElement.valueなどのIDL属性の変更を監視するには、onclickやonchangeなどの入力イベントがおそらく最善の策です。

于 2012-05-22T17:49:26.813 に答える