171105 2017-04-21 01:44:42 -0700 Normalizing touch events mouse compatibility event bubbling 2018-01-04 12:44:53 -0800 1 1 1 Unclassified WebKit UI Events Safari 10 iPhone / iPad iOS 10 RESOLVED DUPLICATE 151933 InRadar P2 Enhancement --- 1 redux webkit-unassigned cdumez dino rbyers rmondello rniwa simon.fraser thorton webkit-bug-importer oldest_to_newest 1299558 0 redux 2017-04-21 01:44:42 -0700 Currently, a touchscreen tap on an arbitrary (non-focusable, non-actionable) part of a document results in mouse compatibility events (the classic mouseover > mouseenter > mousemove > mousedown > focus > mouseup > click that follow after the touchstart > touchend) on that particular part of the document that do not bubble as expected; likewise, if an element is currently focused (e.g. a <button>) from a previous tap interaction, this tap outside of it on an arbitrary element also does not send the mouseout > mouseleave > blur event sequence to that focused element (although the focus does seem to move away from the element?). This has been partially documented (through trial and error) here https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html (and I usually mention it in workshops, see https://patrickhlauke.github.io/getting-touchy-presentation/#202) It's likely that this behavior was introduced (together with the old "Making Elements Clickable" technique, which required authors to add empty event onclick handlers to their elements in order to be able to get the mouse compat events on that element itself - see https://patrickhlauke.github.io/getting-touchy-presentation/#204 - which is a behavior that has since been removed in iOS) for performance optimization reasons back in the early days of iOS' event handling. However, this heuristic behavior is currently not documented on developer.apple.com, and it causes problems with event delegation approaches. As a real-world example, I recently spent some time adding iOS hacks to Bootstrap's core scripting to enable things such as dropdowns and tooltips closing when a user taps outside of them (see https://github.com/twbs/bootstrap/pull/22426). The hack involved dynamically adding/removing noop mouse handlers to the child elements of <body>, in order to coax iOS/Safari into bubbling the mouse compatibility events. Admittedly, one could argue that on touch devices one shouldn't rely on event bubbling of mouse compat events, and instead write explicit touchstart/touchend handlers. However, this would make the resulting code far more complex. AND event bubbling as a result of touch happens correctly in all other tested platforms (e.g. Windows 10 Mobile, Android, touch-enabled Windows laptops with Chrome, Firefox). Is it possible to reconsider iOS' current quirky and undocumented event bubbling for mouse events? If the concern was performance, this may have held true back in the days when the behavior was first devised, but on modern/current iOS devices, I'd posit the perf impact may be minimal (particularly since other browsers on other platforms seem to manage this). Failing that, it would still be good to get this documented officially somewhere. 1362631 1 redux 2017-10-20 02:29:46 -0700 Any chance to at least document this on developer.apple.com? 1362766 2 webkit-bug-importer 2017-10-20 10:56:51 -0700 <rdar://problem/35097817> 1385240 3 simon.fraser 2018-01-02 13:24:04 -0800 Ping to self 1385646 4 330428 simon.fraser 2018-01-03 18:10:38 -0800 Created attachment 330428 Testcase In this simple testcase, bubbling of the synthetic click works fine. 1385789 5 redux 2018-01-04 06:24:52 -0800 Simon, that test case works because you already have a click handler attached to the elements. The issue does not manifest itself when you have: * target element is a link or form control * target or any ancestor (up to but not including body) has explicit mouse or click handler (even if only empty function) * target or any ancestor (up to and including document) has cursor:pointer https://patrickhlauke.github.io/getting-touchy-presentation/#221 The problem with bubbling/delegation happens when you don't have any of the above. For instance, user taps on a <div> but listens for click on the body (as many event delegation frameworks do). As an example, see https://patrickhlauke.github.io/touch/bubbling/div.html (attached as single file testcase here too) 1385790 6 330463 redux 2018-01-04 06:25:26 -0800 Created attachment 330463 Test case showing lack of event bubbling 1385791 7 redux 2018-01-04 06:26:39 -0800 There are more permutations I tested for this at https://patrickhlauke.github.io/touch/ (under the "iOS event bubbling" section) 1385860 8 330475 simon.fraser 2018-01-04 11:27:57 -0800 Created attachment 330475 Click handler on the body This testcase shows the bug. 1385864 9 simon.fraser 2018-01-04 11:43:40 -0800 This happens because Frame::qualifyingNodeAtViewportLocation() doesn't include the body for some reason. 1385865 10 simon.fraser 2018-01-04 11:44:46 -0800 And there's some crazy code that looks at CSS cursor styles to decide which nodes are clickable, which seems bizarre. 1385870 11 simon.fraser 2018-01-04 11:54:03 -0800 This is a really old issue, covered by rdar://problem/5844416. It seems like we're trying to avoid having the tap highlight show up over the entire page, but I think we could fix that without breaking handlers on the body. 1385891 12 simon.fraser 2018-01-04 12:44:53 -0800 *** This bug has been marked as a duplicate of bug 151933 *** 330428 2018-01-03 18:10:38 -0800 2018-01-03 18:10:38 -0800 Testcase synthetic-click.html text/html 1139 simon.fraser PCFET0NUWVBFIGh0bWw+Cgo8aHRtbD4KPGhlYWQ+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIg Y29udGVudD0iaW5pdGlhbC1zY2FsZT0xLjAiPgogICAgPHN0eWxlPgogICAgICAgICN0YXJnZXQg ewogICAgICAgICAgICBoZWlnaHQ6IDIwMHB4OwogICAgICAgICAgICB3aWR0aDogMzAwcHg7CiAg ICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkIGJsYWNrOwogICAgICAgICAgICAtd2Via2l0LXRv dWNoLWNhbGxvdXQ6IG5vbmU7CiAgICAgICAgfQogICAgPC9zdHlsZT4KICAgIDxzY3JpcHQ+CiAg ICAgICAgZnVuY3Rpb24gYWRkTG9nKHMpCiAgICAgICAgewogICAgICAgICAgICBkb2N1bWVudC5n ZXRFbGVtZW50QnlJZCgnbG9nJykudGV4dENvbnRlbnQgKz0gcyArICdcbic7CiAgICAgICAgfQog ICAgICAgIAogICAgICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdsb2FkJywgZnVuY3Rpb24o KSB7CiAgICAgICAgICAgIHZhciB0YXJnZXQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndGFy Z2V0Jyk7CiAgICAgICAgICAgIHRhcmdldC5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0 aW9uKGUpIHsKICAgICAgICAgICAgICAgIGFkZExvZygnVGFyZ2V0OiAnICsgZS50eXBlICsgJyBv biAnICsgZS50YXJnZXQuaWQgKyAnIHBoYXNlICcgKyBlLmV2ZW50UGhhc2UpOwogICAgICAgICAg ICB9LCBmYWxzZSk7CgogICAgICAgICAgICB2YXIgdGFyZ2V0UGFyZW50ID0gZG9jdW1lbnQuZ2V0 RWxlbWVudEJ5SWQoJ3RhcmdldC1wYXJlbnQnKTsKICAgICAgICAgICAgdGFyZ2V0UGFyZW50LmFk ZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24oZSkgewogICAgICAgICAgICAgICAgYWRk TG9nKCdQYXJlbnQ6ICcgKyBlLnR5cGUgKyAnIG9uICcgKyBlLnRhcmdldC5pZCArICcgcGhhc2Ug JyArIGUuZXZlbnRQaGFzZSk7CiAgICAgICAgICAgIH0sIGZhbHNlKTsKCiAgICAgICAgfSwgZmFs c2UpOwogICAgPC9zY3JpcHQ+CjwvaGVhZD4KPGJvZHk+Cgo8cD5Ub3VjaCBpbiB0aGlzIGJveDo8 L3A+CjxkaXYgaWQ9InRhcmdldC1wYXJlbnQiPgogICAgPGRpdiBpZD0idGFyZ2V0Ij4KICAgIDwv ZGl2Pgo8L2Rpdj4KCjxwcmUgaWQ9ImxvZyI+CiAgICAKPC9wcmU+CjwvYm9keT4KPC9odG1sPgo= 330463 2018-01-04 06:25:26 -0800 2018-01-04 06:25:26 -0800 Test case showing lack of event bubbling div.html text/html 3317 redux PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCjxoZWFkPg0KPHRpdGxlPkV2ZW50IGJ1YmJsaW5nPC90 aXRsZT4NCjxtZXRhIGNoYXJzZXQ9dXRmLTg+DQo8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVu dD0id2lkdGg9ZGV2aWNlLXdpZHRoIj4NCjxzdHlsZT4NCmh0bWwsYm9keSB7DQoJYmFja2dyb3Vu ZDogI2VlZTsNCgljb2xvcjogIzMzMzsNCglmb250OiAxZW0vMS4zIEFyaWFsLCBzYW5zOyBtYXgt d2lkdGg6IDQ1ZW07DQp9DQoNCmgxIHsNCglmb250LXNpemU6IDEuMmVtOw0KfQ0KDQpvdXRwdXQg ew0KCWRpc3BsYXk6IGJsb2NrOw0KCXBhZGRpbmc6IDFlbTsNCglmb250LXNpemU6IDAuNzVlbTsN CgliYWNrZ3JvdW5kOiAjZGRkOw0KCWhlaWdodDogMjBlbTsNCglvdmVyZmxvdzphdXRvOw0KCWxp bmUtaGVpZ2h0OiAxOw0KfQ0KDQpvdXRwdXQgc3Ryb25nIHsNCgljb2xvcjogI2YwMDsNCgl0ZXh0 LWRlY29yYXRpb246IHVuZGVybGluZTsNCn0NCg0KYnV0dG9uLCAuYnV0dG9uIHsNCgl3aWR0aDog MTAwJTsNCgloZWlnaHQ6IDRyZW07DQoJbWFyZ2luOiAwIDAgMXJlbTsNCglwYWRkaW5nOiAwLjE1 cmVtIDEuNXJlbTsNCgktbW96LWJveC1zaXppbmc6IGJvcmRlci1ib3g7DQoJYm94LXNpemluZzog Ym9yZGVyLWJveDsNCglkaXNwbGF5OiBpbmxpbmUtYmxvY2s7DQoJdmVydGljYWwtYWxpZ246IG1p ZGRsZTsNCgl0ZXh0LW92ZXJmbG93OiBlbGxpcHNpczsNCgl3aGl0ZS1zcGFjZTogbm93cmFwOw0K CW92ZXJmbG93OiBoaWRkZW47DQoJZm9udDogMS42cmVtLzMuOHJlbSBBcmlhbCwgU2Fucy1zZXJp ZjsNCgl0ZXh0LWFsaWduOiBjZW50ZXI7DQoJdGV4dC1kZWNvcmF0aW9uOiBub25lOw0KCW91dGxp bmU6IG5vbmU7DQogICAgY29sb3I6ICNmZmY7DQogICAgdGV4dC1kZWNvcmF0aW9uOiBub25lOw0K ICAgIGJhY2tncm91bmQtY29sb3I6ICMwMDk5ZTU7DQogICAgYm9yZGVyOiAxcHggc29saWQgIzA2 QTsNCiAgICBib3JkZXItcmFkaXVzOiAwLjNyZW07DQogICAgLXdlYmtpdC1ib3gtc2hhZG93OiAw cHggMXB4IDBweCByZ2JhKDI1NSwyNTUsMjU1LDAuMTUpIGluc2V0Ow0KICAgIGJveC1zaGFkb3c6 IDBweCAxcHggMHB4IHJnYmEoMjU1LDI1NSwyNTUsMC4xNSkgaW5zZXQ7DQoJdHJhbnNpdGlvbjog Y29sb3IgLjFzIGxpbmVhcjsNCn0NCg0KYnV0dG9uOmZvY3VzLCBidXR0b246aG92ZXIsDQouYnV0 dG9uOmZvY3VzLCAuYnV0dG9uOmhvdmVyIHsNCgliYWNrZ3JvdW5kLWNvbG9yOiAjMEFGOw0KfQ0K DQpidXR0b246YWN0aXZlLA0KLmJ1dHRvbjphY3RpdmUgIHsNCgliYWNrZ3JvdW5kLWNvbG9yOiAj MDA5OWU1Ow0KICAgIC13ZWJraXQtYm94LXNoYWRvdzogMHB4IDFweCAwcHggcmdiYSgwLDAsMCww LjE1KSBpbnNldDsNCiAgICBib3gtc2hhZG93OiAwcHggMXB4IDBweCByZ2JhKDAsMCwwLDAuMTUp IGluc2V0Ow0KfQ0KDQpidXR0b246Oi1tb3otZm9jdXMtaW5uZXIsDQouYnV0dG9uOjotbW96LWZv Y3VzLWlubmVyIHsNCiAgYm9yZGVyOiBub25lOw0KICBvdXRsaW5lOiBub25lOw0KfQ0KPC9zdHls ZT4+DQo8c2NyaXB0Pg0KICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdsb2FkJywgZnVuY3Rp b24oKSB7DQoJdmFyIHQgPSAwOw0KCXZhciBldmVudHMgPSBbDQoJJ01TUG9pbnRlckRvd24nLA0K CSdNU1BvaW50ZXJVcCcsDQoJJ01TUG9pbnRlckNhbmNlbCcsDQoJJ01TUG9pbnRlck1vdmUnLA0K CSdNU1BvaW50ZXJPdmVyJywNCgknTVNQb2ludGVyT3V0JywNCgknTVNQb2ludGVyRW50ZXInLA0K CSdNU1BvaW50ZXJMZWF2ZScsDQoJJ01TR290UG9pbnRlckNhcHR1cmUnLA0KCSdNU0xvc3RQb2lu dGVyQ2FwdHVyZScsDQoJJ3BvaW50ZXJkb3duJywNCgkncG9pbnRlcnVwJywNCgkncG9pbnRlcmNh bmNlbCcsDQoJJ3BvaW50ZXJtb3ZlJywNCgkncG9pbnRlcm92ZXInLA0KCSdwb2ludGVyb3V0JywN CgkncG9pbnRlcmVudGVyJywNCgkncG9pbnRlcmxlYXZlJywNCgknZ290cG9pbnRlcmNhcHR1cmUn LA0KCSdsb3N0cG9pbnRlcmNhcHR1cmUnLA0KCSd0b3VjaHN0YXJ0JywNCgkndG91Y2htb3ZlJywN CgkndG91Y2hlbmQnLA0KCSd0b3VjaGVudGVyJywNCgkndG91Y2hsZWF2ZScsDQoJJ3RvdWNoY2Fu Y2VsJywNCgknbW91c2VvdmVyJywNCgknbW91c2Vtb3ZlJywNCgknbW91c2VvdXQnLA0KCSdtb3Vz ZWVudGVyJywNCgknbW91c2VsZWF2ZScsDQoJJ21vdXNlZG93bicsDQoJJ21vdXNldXAnLA0KCSdm b2N1cycsDQoJJ2JsdXInLA0KCSdjbGljaycNCgldOw0KCXZhciBiID0gZG9jdW1lbnQuZ2V0RWxl bWVudEJ5SWQoJ2InKTsNCgl2YXIgbyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdvJyksDQoJ cmVwb3J0ID0gZnVuY3Rpb24oZSkgew0KCQlpZiAoZS50YXJnZXQhPWIpIHsgcmV0dXJuOyB9DQoJ CXZhciBzID0gZS50eXBlICsgJzxicj4nOw0KCQlzZXRUaW1lb3V0KGZ1bmN0aW9uKCkgeyBkZWxh eWVkSW5uZXJIVE1MKHMpIH0sIDEwMCk7DQoJfQ0KDQoJLyogSGFjayB0byB3b3JrIGFyb3VuZCBu ZXcgaU9TOCBiZWhhdmlvciB3aGVyZSBpbm5lckhUTUwgY291bnRzIGFzIGEgY29udGVudCBjaGFu Z2UgLSBwcmV2aW91c2x5LCBpdCB3YXMgc2FmZSB0byB1c2UsIHNlZSBodHRwOi8vd3d3LnF1aXJr c21vZGUub3JnL2Jsb2cvYXJjaGl2ZXMvMjAxNC8wMi90aGVfaW9zX2V2ZW50X2MuaHRtbCAqLw0K CWRlbGF5ZWRJbm5lckhUTUwgPSBmdW5jdGlvbihzKSB7DQoJCW8uaW5uZXJIVE1MICs9IHM7DQoJ fQ0KDQoJLyogYXR0YWNoIGxpc3RlbmVycyB0byB0aGUgYm9keSB0byB0ZXN0IGJ1YmJsaW5nL2V2 ZW50IGRlbGVnYXRpb24gKi8NCglmb3IgKHZhciBpPTA7IGk8ZXZlbnRzLmxlbmd0aDsgaSsrKSB7 DQoJCWRvY3VtZW50LmJvZHkuYWRkRXZlbnRMaXN0ZW5lcihldmVudHNbaV0sIHJlcG9ydCwgZmFs c2UpOw0KCX0NCn0sIHRydWUpOw0KPC9zY3JpcHQ+DQo8c3R5bGU+DQpkaXYgeyBwYWRkaW5nOiAx ZW07IGJvcmRlcjogMXB4IGdyYXkgc29saWQ7IH0NCm91dHB1dCB7IG1hcmdpbi10b3A6IDJlbTt9 DQo8L3N0eWxlPg0KPC9oZWFkPg0KPGJvZHk+DQo8aDE+RXZlbnQgYnViYmxpbmc8L2gxPg0KPHA+ PGNvZGU+Jmx0O2Rpdj48L2NvZGU+PC9wPg0KPGRpdiBpZD0ib3V0ZXIiPg0KPGRpdiBpZD0ibWlk ZGxlIj4NCjxkaXYgaWQ9ImlubmVyIj4NCjxkaXYgaWQ9ImIiIGNsYXNzPSJidXR0b24iPlRlc3Q8 L2Rpdj4NCjwvZGl2Pg0KPC9kaXY+DQo8L2Rpdj4NCjxwPkV2ZW50cyB0aGF0IGJ1YmJsZSB1cCB0 byA8Y29kZT5ib2R5PC9jb2RlPjo8L3A+DQo8b3V0cHV0IGlkPSJvIj48L291dHB1dD4NCjwvYm9k eT4NCjwvaHRtbD4= 330475 2018-01-04 11:27:57 -0800 2018-01-04 11:27:57 -0800 Click handler on the body synthetic-click.html text/html 608 simon.fraser PCFET0NUWVBFIGh0bWw+Cgo8aHRtbD4KPGhlYWQ+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIg Y29udGVudD0iaW5pdGlhbC1zY2FsZT0xLjAiPgogICAgPHN0eWxlPgogICAgICAgICN0YXJnZXQg ewogICAgICAgICAgICBoZWlnaHQ6IDEyMHB4OwogICAgICAgICAgICB3aWR0aDogMzAwcHg7CiAg ICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkIGJsYWNrOwogICAgICAgICAgICAtd2Via2l0LXRv dWNoLWNhbGxvdXQ6IG5vbmU7CiAgICAgICAgfQogICAgPC9zdHlsZT4KICAgIDxzY3JpcHQ+CiAg ICAgICAgZnVuY3Rpb24gYWRkTG9nKHMpCiAgICAgICAgewogICAgICAgICAgICBkb2N1bWVudC5n ZXRFbGVtZW50QnlJZCgnbG9nJykudGV4dENvbnRlbnQgKz0gcyArICdcbic7CiAgICAgICAgfQog ICAgICAgIAogICAgPC9zY3JpcHQ+CjwvaGVhZD4KPGJvZHkgb25jbGljaz0iYWRkTG9nKCdib2R5 IGdvdCBjbGljaycpIj4KCjxwPlRhcCBpbiB0aGUgYm94IGJveDo8L3A+CjxkaXYgaWQ9InRhcmdl dC1wYXJlbnQiPgogICAgPGRpdiBpZD0idGFyZ2V0Ij4KICAgIDwvZGl2Pgo8L2Rpdj4KCjxwcmUg aWQ9ImxvZyI+CiAgICAKPC9wcmU+CjwvYm9keT4KPC9odG1sPgo=