Bug 89041

Summary: Click events from child element of disabled <button> incorrectly bubble
Product: WebKit Reporter: john van horn <jmvanhorn>
Component: UI EventsAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, akeerthi, ap, bfulgham, bill, cdumez, me, pf, rniwa, webkit-bug-importer, wenson_hsieh, zalan
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: Mac   
OS: OS X 10.6   
URL: http://jsfiddle.net/sjRtk/3/
See Also: https://bugs.webkit.org/show_bug.cgi?id=99712
https://bugs.webkit.org/show_bug.cgi?id=15696
Bug Depends on: 251246    
Bug Blocks:    
Attachments:
Description Flags
html/js example of incorrect bubbling none

john van horn
Reported 2012-06-13 15:10:37 PDT
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. Example: <div id="btn-container"> <button disabled> <i class="icon">XX</i> disabled-icon </button> </div> 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.
Attachments
html/js example of incorrect bubbling (747 bytes, text/html)
2012-06-13 15:11 PDT, john van horn 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
john van horn
Comment 1 2012-06-13 15:11:19 PDT
Created attachment 147422 [details] html/js example of incorrect bubbling
Pablo Flouret
Comment 2 2012-06-20 17:09:15 PDT
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." http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fe-disabled 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/
Alexey Proskuryakov
Comment 3 2012-10-19 13:14:38 PDT
See also: bug 15696, bug 99712.
Radar WebKit Bug Importer
Comment 4 2022-02-07 18:32:16 PST
<rdar://problem/88605979>
Ahmad Saleem
Comment 5 2022-08-19 22:58:23 PDT
I am able to reproduce this bug in Safari 15.6.1 and Safari Technology Preview 151 using attached test case, where clicking "xx" on disabled button will trigger event and show up in Console: [Log] click btn-container – MouseEvent {isTrusted: true, screenX: 544, screenY: 168, …} (attachment.cgi, line 23)...... While in case of other browsers (Chrome Canary 106 and Firefox Nightly 105), I am unable to reproduce this issue. I am going to mark this bug from "Unconfirmed" to "New". Thanks!
Note You need to log in before you can comment on or make changes to this bug.