javascript - 在禁用的 HTMLElement 上触发事件

Question

我有一个我不想在其上触发事件的文本区域元素。 当设置一个监听器并且元素被禁用时，我得到了一个不一致的行为。 Chrome (64.0.3282.186)、Safari (11.0.3) 和 Edge 触发事件，一切看起来都很好(正如我期望的那样)，但在 Firefox (58.0.2) 中，事件监听器不会触发。 有人知道如何在不启用元素的情况下解决这个问题吗？

var eventName = 'bar',
    element = document.querySelector('#foo'),
    event = new CustomEvent(eventName, {
        cancelable: true,
        bubbles: false,
        detail: null
    });

element.addEventListener(eventName, function() {
    element.value = 'X';
});
element.dispatchEvent(event);

<textarea id="foo" disabled="disabled"></textarea>

Answer 1

添加一个 HTMLElement 方法来启用元素、调度事件然后再次禁用它。

HTMLElement.prototype.fireEvent = function(e) {
    const isDisabled = this.hasAttribute('disabled');
    
    this.removeAttribute('disabled');
    this.dispatchEvent(e);
  
    if (isDisabled)
        this.setAttribute('disabled', true);
};

var eventName = 'bar',
    element = document.querySelector('#foo'),
    event = new CustomEvent(eventName, {
        cancelable: true,
        bubbles: false,
        detail: null
    });

element.addEventListener(eventName, function() {
    element.value = 'X';
});

element.fireEvent(event)

<textarea id="foo" disabled="disabled"></textarea>

当然，这会修改不受欢迎的原生元素 - 您可以避免使用原型(prototype)方法，而只需编写一个普通的旧函数，即 fireEvent(elem, event)。