JSFiddle - React, Tailwind, and code Playground

by dmethvin

HTML

<form action="" name="frmEdit">
    <input type="button" value="Works (onclick)" id="btn-onclick"/>
    <input type="button" value="Breaks (addEventListener)" id="btn-ael"/>
    <input type="button" value="Breaks (jQuery)" id="btn-jQuery"/>
</form>
<p>The expected output is produced when clicking <b>the first</b> button:</p>
    <pre>
    begin onerror
    catch block
    end onerror
    xyz is not defined 
    </pre>

<p>When clicking <b>the second button</b> the execution is aborted in the middle of onerror, printing only:</p>
    <pre>
    begin onerror
    xyz is not defined 
    </pre>

JavaScript

// #10904
window.onerror = function() {
    console.log('begin onerror');

    try {
        abc(); // create a runtime error by calling a method that doesn't exist
    } catch(e) { 
        console.log('catch block'); 
    }

    console.log('end onerror');
};

$(function() {
    document.getElementById("btn-onclick").onclick = function() {
        xyz(); // create a runtime error by calling a method that doesn't exist
    };
    document.getElementById("btn-ael").addEventListener("click", function() {
        xyz(); // create a runtime error by calling a method that doesn't exist
    }, false);
    $('#btn-jQuery').click(function() {
        xyz(); // create a runtime error by calling a method that doesn't exist
    });
});