RESOLVED INVALID 203414
Changing DOM in "touchstart" event handler prevent "click" event propagation. New in Safari 13
https://bugs.webkit.org/show_bug.cgi?id=203414
Summary Changing DOM in "touchstart" event handler prevent "click" event propagation....
Pavel Jurasek
Reported 2019-10-25 07:46:22 PDT
Created attachment 381918 [details] Problem with new version of Safari Hi, we have built our hybrid application as an SPA. The recent release of Safari 13 made our website break. In Safari 12 we have been able to get both events on the mobile device (touchstart and click) event when we created new element in DOM. In Safari 13 we are not able to get click event after we touch DOM (creating new element prevent propagation). Code example: <html> <head></head> <body> <a ontouchstart="console.log('touch');mutateDOM();" onclick="console.log('click');">Test</a> <script> function mutateDOM() { var input = document.createElement('input'); input.id = "test"; document.body.appendChild(input); } document.addEventListener('click', function (event) { console.log('Got event!'); }, true); </script> </body> </html> Result in Safari 12 on iOS 11.1: - touch - input generated - click - input is focused Result in Safari 13 on iOS 13.0: - touch - input generated X click is not fired X input is not focused CodePen for testing: https://codepen.io/pavel-jurasek-hypofriend-de/pen/LYYywxR
Attachments
Problem with new version of Safari (213.80 KB, image/jpeg)
2019-10-25 07:46 PDT, Pavel Jurasek
no flags
Radar WebKit Bug Importer
Comment 1 2019-10-27 14:44:56 PDT
Brent Fulgham
Comment 2 2019-11-04 11:58:53 PST
This is correct behavior. You are creating a new and clickable element on touch. This is a common pattern for hover menus and other web content that expect event propagation to stop so that the user can select from the new options provided. We cannot proceed with a click in this case because it would break large amounts of existing content for touch devices.
Note You need to log in before you can comment on or make changes to this bug.