JSFiddle - React, Tailwind, and code Playground

by tobek

HTML

<form>
    <label>
        <input type="text" placeholder="Once this has focus..." />
        <p><a href="#" tabindex="0">...how do I distinguish clicks here...</a></p>
    </label>
</form>

<p><a href="#">...from clicks here?</a></p>

<br /><br />
<div></div>

CSS

form {
    border: 1px solid black;
    padding: 10px;
}

JavaScript

$(document).ready(function() {

    $("input").on("blur", function() {
        $("div").append("input blurred<br>");
    });
    
    $("label").on("blur", function() {
        $("div").append("label blurred<br>");
    });
    $("form").on("blur", function() {
        $("div").append("form blurred<br>");
    });
    
    $("label").focusout(function(e) {
        $("div").append("focusout on label<br>");
        console.log("labl", e);
    });
    $("form").focusout(function(e) {
        $("div").append("focusout on form<br>");
        console.log(e);
    });
    
});