JSFiddle - React, Tailwind, and code Playground

HTML

<p>Problem: type into the box, end by pressing <code>[enter]</code>. I do not wish to trigger the button, but it seems that it will be activated by <code>[enter]</code> automatically.</p>
<p>i would imagine the focus on input and the cancellation of the event should prevent the button from knowing about the event in the first place. But it seems to be activated nonetheless.</p>
<form>
    <input /><button>clear</button>
    <ul id="log"></ul>
</form>

JavaScript

$(document).ready(function () {
    $('input').on('keyup', function (event) {
        $('ul').append('<li>' + event.keyCode + '</li>');
        if (event && event.keyCode == 13) alert('this is the input');
        event.preventDefault();
        event.stopPropagation();
        event.stopImmediatePropagation();
        return false;
    });

    $('button').on('click tap', function (event) {
        alert('this is the button');
        event.preventDefault();
        event.stopPropagation();
        event.stopImmediatePropagation();
        return false;
    });

    $('form').submit(function (event) {
        alert('this is the form');
        event.preventDefault();
        event.stopPropagation();
        event.stopImmediatePropagation();
        return false;
    });
});