Cacher is the code snippet organizer for pro developers

body{
  font-family: sans-serif;
  background: #fff;
  margin: 20px;
}
a {
  margin: 20px;
}
a:focus,
a:active {
   outline: none;
}
.keyfocus a:focus,
.keyfocus a:active{
   outline: 1px solid #f00;
}

this.onkeydown = function (e) {
  if (e.keyCode === 9) { // if Tab key was pressed
    console.log('tab pressed');
      $('body').addClass('keyfocus');
  }
};
$(document).on('mousedown', function(e) { 
    if (e.button == 0) {
        console.log('mouse clicked');
        $('body').removeClass('keyfocus');
    }
});

<ol>
  <li>Press the tab key to activate focus outlines.</li>
  <li>Click your mouse anywhere to disable focus outlines.</li>
</ol>
<a href="#1">BUTTON 1</a>
<a href="#2">BUTTON 2</a>
<a href="#3">BUTTON 3</a>