禁用HTMLElement上的触发事件

Question

I have a textarea element on which I wan't to fire an event. When setting up a listener and the element is disabled I get an inconsistent behavior. Chrome (64.0.3282.186), Safari (11.0.3) and Edge fires the event and everything looks good (as I would expect them to do) but in Firefox (58.0.2) the eventlistener does not fire. Anyone got any idea on how to solve this without enabling the element?

 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

Add an HTMLElement method that enables the element, dispatches the event and then disables it again afterwards.

 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> 

Granted, this modifies the native element which is frowned upon - you can avoid prototype methods and just write a plain old function, ie fireEvent(elem, event) .

Answer 2

I posted an bug to Mozilla on the matter as nothing is mentioned in the w3 spec that the element should not dispatch events when the element is disabled.

The only thing that is mentioned is that mouse events should not be dispatched. https://www.w3.org/TR/2011/WD-html5-20110525/association-of-controls-and-forms.html#attr-fe-disabled

A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.

The bug can be found here: https://bugzilla.mozilla.org/show_bug.cgi?id=1443148