Steps to reproduce the problem: var div = document.createElement('div'); div.innerHTML = '<input type="checkbox">'; var input = div.querySelector('input'); div.addEventListener('click', function () {console.log('click on the div');}); input.addEventListener('click', function () {console.log('click on the input');}); var event = new MouseEvent('click', { 'view': window, 'bubbles': true, 'cancelable': true }); input.dispatchEvent(event); What is the expected behavior? Console output should show: "click on the input" "click on the div" What went wrong? Console output shows: "click on the input" That is, the event is not bubbled to the div. Reported also for Chrome at https://code.google.com/p/chromium/issues/detail?id=479207. Safari is now the only browser that does it this way. This seems to be introduced in https://bugs.webkit.org/show_bug.cgi?id=12918
Fixed in bug 149488?
I am unable to reproduce this bug in all modern browsers (Chrome Canary 106, Firefox Nightly 105, Safari 15.6 and Safari Technical Preview 151) and it shows expected result in all browsers and get two event with "input" and "div". I am going to mark this as "RESOLVED CONFIGURATION CHANGED", since it was fixed along the way. Thanks!