If a disabled <button> element contains a child element, then clicking on the child causes a click event to bubble up to the button's containing element.
If an event listener is added to #btn-container for 'click' events, then clicking on the <i> element ("XX", contained in disabled button) causes the handler to be invoked. Clicking on the button's other content ("disabled-icon" text) does not invoke the handler.
Created attachment 147422 [details]
html/js example of incorrect bubbling
html spec says about disabled form controls and events:
"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 problem seems to be that the event's target is set to the button's child element, other browsers have the button as target.
Not sure what code is really to blame, hit testing?
As an aside, all browsers seem to be doing something different with regards to mouse events and disabled form controls, maybe that's why the spec only talks about the click events, where all browsers sort of agree.
I used something like this to play around, http://jsfiddle.net/EqfZ9/1/
See also: bug 15696, bug 99712.