禁用HTMLElement上的触发事件

Question

我有一个textarea元素，我不想发动事件。设置侦听器并禁用该元素时，我会得到一个不一致的行为。 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>

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

Answer 2

我在这个问题上向Mozilla发布了一个错误，因为w3规范中没有提到元素在禁用元素时不应该调度事件。

唯一提到的是不应该发送鼠标事件。 https://www.w3.org/TR/2011/WD-html5-20110525/association-of-controls-and-forms.html#attr-fe-disabled

禁用的表单控件必须防止在元素上调度在用户交互任务源上排队的任何单击事件。

这个bug可以在这里找到：https://bugzilla.mozilla.org/show_bug.cgi?id=1443148