JSFiddle - React, Tailwind, and code Playground

by crislivinitup

HTML

<input type="checkbox" onclick="CancelEvent (event, 'onclick');" />
    Try to check this checkbox.
    <br /><br />
    Select an item from the following selection list.
    <select onchange="CancelEvent (event, 'onchange');">
        <option>First option</option>
        <option>Second option</option>
    </select>
    <br /><br />
    
    <div id="info" style="width:300px; height:150px; overflow:auto; background-color:#e0a0d0;"></div>

JavaScript

function WriteInfo (message) {
            var info = document.getElementById ("info");
            info.innerHTML += message + "<br />";
            info.scrollTop = info.scrollHeight;
        }

        function CancelEvent (event, eventName) {
            if ('cancelable' in event) {
                    // in Firefox, the cancelable property always returns true,
                    // so the cancelable state of the event cannot be determined
                if (event.cancelable) {
                    event.preventDefault ();
                    WriteInfo ("The " + eventName + " event is canceled.");
                }
                else {
                    WriteInfo ("The " + eventName + " event is not cancelable.");
                }
            }
            else {
                event.returnValue = false;
                WriteInfo ("The " + eventName + " event is probably canceled.");
            }
        }