javascript - 监听元素禁用事件

Question

有没有办法监听 disabled DOM 属性的变化？

是这样的:

setTimeout(function () {
    $("#myElem").prop('disabled', true);
}, 1500);

$("#myElem").on('disabled', function(e){
    alert('my custom code');
});

这里还有一个 fiddle.

编辑:如果可能的话，我想要一个通用的解决方案。例如，在我的应用程序中，我使用了一个 MVVM 框架 (Knockout)，它在内部处理属性更改:

<button data-bind="disable: time > 3">
</button>

我声明了禁用逻辑，但我没有手动禁用它。我想手动做的是 Hook 该事件，这样我就可以执行自定义逻辑。

我见过 example在这里:

jQuery.propHooks.disabled = {
  set: function (el, value) {
    if (el.disabled !== value) {
      el.disabled = value;
      value && $(el).trigger('disabledSet');
      !value && $(el).trigger('enabledSet');
    }
  }
};

但这似乎行不通。

Answer 1

你应该使用 Mutation Observers为此:

// Set up a new observer
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        // Check the modified attributeName is "disabled"
        if(mutation.attributeName === "disabled") {
            alert("disabled changed");
        }
    });    
});
// Configure to only listen to attribute changes
var config = { attributes: true };
// Start observing myElem
observer.observe(myElem, config);

// Testing the observer gets triggered
setTimeout(function() {
    myElem.disabled = true;
}, 2000);

<input id="myElem">

虽然应该注意 modern browser support很好，不支持IE<=10。你可能能够得到旧的Mutation events在 IE9/10 中工作，但它们的支持不是很好。如果做不到这一点，setInterval 可用于“监视”元素，但这只能用作最后的手段。