JSFiddle - React, Tailwind, and code Playground

HTML

<p>Click on editable body, link and outside body - on html element. Compare between browsers which events are fired.</p>

<iframe id="editable"></iframe>

JavaScript

var iframe = document.getElementById( 'editable' );

iframe.contentWindow.document.write(
    '<html>' +
    '<head>' +
        '<title></title>' +
        '<style>body { background: #AAA } html { background: #555 }</style>' +    
    '</head>' +
    '<body contenteditable="true">' +
        '<p>text <a href="#">link</a> text.</p>' +
    '</body></html>' );
        
setTimeout( function() {
    var body = iframe.contentWindow.document.body;

    body.addEventListener( 'focus', function() {
        console.log( 'focus' );
    } );
    body.addEventListener( 'blur', function() {
        console.log( 'blur' );
    } );
}, 100 );