我有一个select[multiple],我在页面上给出了一个custom-multiselect类,为此,我正在捕获DOMSubtreeModified事件,如下所示:

HTML:

<select class="custom-multiselect"></select>

jQuery的:
$('.custom-multiselect').each(function (i, select) {
    var sel = this;
    adjustHeight(sel); //Custom function
    //Binding DOMSubtreeModified to catch if the select list gets modified by the user
    $(sel).on('DOMSubtreeModified', function () {
        adjustHeight(sel);
    });
    //For Internet Explorer
    $(sel).on('propertychange', function () {
        adjustHeight(sel);
    });
});

这种方法完美无缺。由于DOMSubtreeModified已贬值,因此我想将MutationObserver函数转换为DOMSubtreeModified

所以我做了这样的事情:
var observer = new MutationObserver(function (mutation) {
    mutation.forEach(function (m) {
        if (m.type == 'subtree') {
            adjustHeight(this);//Can I use m.target here?
        }
    });
});
observer.observe(document.querySelector('select.custom-multiselect'), {
    subtree: true
});

但是我最终得到错误



如何转换DOMSubtreeModified观察到的MutationObserver事件?

最佳答案

  • 将代码替换旧的DOM事件,并使用sel变量作为观察目标。
  • 在MutationObserver中使用childList选项,因为subtree并未指定要查找的内容。
  • 因为只订阅一种类型,所以无需检查突变。

  • $('.custom-multiselect').each(function() {
        var sel = this;
        adjustHeight(sel);
    
        new MutationObserver(function() {
            adjustHeight(sel);
        }).observe(sel, {childList: true, subtree: true});
    });
    

    或者,如果由于某些原因您喜欢.bind:
    new MutationObserver(adjustHeight.bind(null, sel))
        .observe(sel, {childList: true, subtree: true});
    

    09-18 17:57