Web browsers utilize the CSS outline property to indicate which element is currently in focus, a common knowledge amongst web developers. In jQuery, a typical implementation might look like this:

$(document).ready(function() {
    $("body").on("mousedown", "*", function(e) {
        if (($(this).is(":focus") || $(this).is(e.target)) && $(this).css("outline-style") == "none") {
            $(this).css("outline", "none").on("blur", function() {
                $(this).off("blur").css("outline", "");
            });
        }
    });
});

Explanation: This script listens for the mousedown event on any given element. By using event delegation, it covers both existing and dynamically created elements. When an element is clicked with the mouse, its CSS outline property is set to none, effectively removing the outline.

The targeted element then receives a new handler for the blur event. As soon as the focus leaves the element, the outline property is reset to an empty string, allowing the browser to handle the outline display. Subsequently, the element removes its own blur handler to optimize memory usage, ensuring that outlines are only visible when focused via keyboard navigation.

Edit

In response to feedback from Rakesh, a slight modification has been made to the function. It now checks if an outline is already defined and avoids overriding it. Check out the demo here.

http://jsfiddle.net/np3FE/2/

$(function(){
    var lastKey = new Date(),
        lastClick = new Date();

    $(document).on( "focusin", function(e){
        $(".non-keyboard-outline").removeClass("non-keyboard-outline");
        var wasByKeyboard = lastClick < lastKey
        if( wasByKeyboard ) {
            $( e.target ).addClass( "non-keyboard-outline");
        }

    });

    $(document).on( "click", function(){
        lastClick = new Date();
    });
    $(document).on( "keydown", function() {
        lastKey = new Date();
    });


});

CSS

*:active, *:focus {
    outline: none;
}

*:active.non-keyboard-outline, *:focus.non-keyboard-outline {
    outline: red auto 5px;
}

Eliminating the outline may not be the best option for ensuring accessibility! It is preferable for the focus ring to appear only when the user specifically intends to utilize the keyboard.

In response to 2018: Consider utilizing :focus-visible. This feature, currently a W3C proposal, allows for styling keyboard-focused elements in CSS. In case major browsers do not support it yet, you can implement a solid polyfill. This method does not necessitate the addition of extra components or modifications to the tabindex.

/* Eliminate outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optionally customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

If you require more information, I have also penned an informative article with demos available at this link.

To avoid the focus event from firing, one simple solution is to utilize mouse events.

$('#element').click(function(){
   $(this).blur();
});

An issue that may arise with this approach is the inability to select the element using the mouse. To address this, you can add a class and modify the focus style accordingly.

$('#element').click(function(){
   $(this).addClass('fromMouse');
});
$('#element').blur(function(){
  if($(this).hasClass('fromMouse')){
     $(this).removeClass('fromMouse');
  }
});

CSS

.fromMouse{
  outline: none;
}

http://api.jquery.com/blur/

Cascading Style Sheets

:focus{
  outline: none;
}

.outline{
  outline: 2px solid rgba(200,120,120, 0.8);
}

jQuery script

$(function(){
  $('*').on('keydown.tab', function(e){
    /*
    TAB or Shift Tab, Aw.
    Add some more key code if you really want
    */
    if ( 9== e.which && this == e.target ){
      window.setTimeout( function(){
        $('.outline').removeClass('outline');
         $(document.activeElement).addClass('outline');
      }, 100 );
    }

  });

});

This method works effectively. The outline will only be displayed when the element is focused using the keyboard (specifically Tab and Shift Tab keys).

Check it out in action: http://jsbin.com/okarez/1

After reviewing @theftprevention's response, a more personalized approach could be:

$(function(){
    $('body')
    .on('focus', '*', function() {
        var e = $(this);
        if (!e.is('.focus-mouse')) {
            e.addClass('focus-keyboard');
        }
    })
    .on('mousedown', '*', function() {
        $(this).removeClass('focus-keyboard').addClass('focus-mouse');
    })
    .on('blur', '*', function() {
        $(this).removeClass('focus-keyboard').removeClass('focus-mouse');
    });
});

Now it is easy to customize using the .focus-keyboard and .focus-mouse classes in CSS.

.focus-keyboard{
    background:#eeeeee;
}
.focus-mouse{
    outline: 0;
}

By adding a class to the body element, you can detect whether the user is currently using a mouse or keyboard through CSS.

document.body.addEventListener('mousedown', function() {
  document.body.classList.add('using-mouse');
});
document.body.addEventListener('keydown', function() {
  document.body.classList.remove('using-mouse');
});

You can then style it in your CSS like this:

:focus {
  outline: #08f auto 2px;
}

body.using-mouse :focus {
  outline: none;
}