JQuery focus and click running on same time on element

Question

I have a button which has 2 different behaviors

1. While navigating with keyboard with tab key, when the button gets blur is should move focus to button 1
2. When we hit enter key, then it should move focus to button 2

Case 1 is working fine, but when we hit enter key the focus moves to Button 2 and then moving to button 1, Here I found blur also calling when we hit the enter button so it calling the concern function, is there any way to achieve my goal?

$('#btn').on('focus', function(){
    }).on('blur', function(){
         setTimeout(function() {
            $('.span-hlo')[0].focus(); 
        },250);
});
$('#btn').on('click', function(){
setTimeout(function() {
    $('.span-welcome')[0].focus(); 
  },250);
});

Fiddle example

Answer 1

Update your jquery Like this

var lastClick = null;
$('#btn').mousedown(function(e) {
  lastClick = e.target;
}).focus(function(e){
    if (e.target == lastClick) {
      $('.span-welcome')[0].focus(); 
    } else {
      $('.span-hlo')[0].focus();    
    }
    lastClick = null;

});