JSFiddle - React, Tailwind, and code Playground
HTML
<form id="searchform">
<input id="s" type="search" autocomplete="off" name="s" value="">
<div id="search-submit" class="input-group-addon">
<i>SUBMIT</i>
</div>
</form>
CSS
#search-submit {
padding: 5px;
background-color: #CCC;
margin: 20px;
cursor: pointer;
}
JavaScript
var inProgress = false;
var oEvent = {click:0,blur:0};
$("#search-submit").on("click", function(e) {
oEvent[e.type] = e.timeStamp;
inProgress = true; http://jsfiddle.net/405kzboh/#run
alert ("Form Submit");
inProgress = false;
});
$("#s").on("blur", function (e) {
oEvent[e.type] = e.timeStamp;
setTimeout(function() {
if ( ! inProgress && oEvent.click < oEvent.blur ) {
alert ("Blur");
inProgress = false;
}
}, 500);
});