【jQuery】如何去掉点击链接或图片时的虚线框

在浏览器中点击一个链接的时候会出现一个虚线框，通常情况页面会跳转我们不必在意，但如果仅仅为了触发一些动作如 AJAX 又或者被点击的是非矩形图片，那这个虚线框就有些影响视觉效果了，这里介绍一个小技巧，使用 jQuery 来方便的去掉链接或图片链接及按钮在被点击时候出现的虚线框，具体代码如下。

最近在帮 anyDzn.com 测试新版首页的时候发现的，左边的半圆形主导航链接在点击的时候会出现一个虚线框，有点影响美观，于是添加了以下代码（基于 jQuery 库兼容 Firefox 等浏览器）：

jQuery(function($){
    $('a,input[type="button"]').focus(function(){
        $(this).blur();      //在获取焦点的时候马上失去焦点；
    });
});

原理：其实原理很简单，就是当这个链接或按钮在被点击获取焦点的时候马上用 JS 使其失去焦点即可。

缺点：但该方法也有缺点，对于使用 tab 键切换焦点及不使用鼠标的用户会无法定位焦点到该链接上，这样的牺牲往往是不值得的。而如果将 focus 事件修改为 click 事件的话虽然可以使用 tab 定位焦点，但在点击的瞬间还是会有一个虚线框。开发者可以根据自己的实际情况选择合适的解决方案，但不可为了这点效果而使用户做出牺牲。