JSFiddle - React, Tailwind, and code Playground

HTML

<input id="f1" value="F1: I have blur attached"><br>
<input id="f2" value="F2: Click me to trigger f1.blur()"><br>
<input id="f3" value="F3: Clicking me won't trigger f1.blur()" tabindex="-1"><br>

CSS

input {
    width: 90%;   
    margin: 6px;
    border: 2px solid #999;
    padding: 4px;
}

JavaScript

var currElem = null;

$(document).mousedown(function(e) {
    currElem = e.target;
});

$('#f1').blur(function() {
    if(currElem != null && currElem.id != "f3") {
        $(this).val('F1: clicked elem is not f3, blur event worked'); 
        // do your blur stuff here
    }
    else {
        // for demo only, comment this part out
        $(this).val('F1: clicked elem is f3, no blur event'); 
    }
});