javascript:void(0)分析

    javascript:void(0)我们在a标签添加click等事件的时候经常用到a标签href属性，像下面这样

<a href='javascript:void(0);' onclick='dosomething()'>mooshine</a>

a链接的href属性由两部分组成，javascript:     void(0);

先看javascript:

javascript:是什么呢？是一种伪协议，我们熟知的几种协议有：http,https.file,ftp,telnet,tcp,udp等互联网协议，那么伪协议又是什么鬼呢?

伪装协议就如实让浏览器执行一些外部程序，或者一些内置功能，不如现在有些网站用data:(base64编码数据)来显示图片，也算是一种伪装的协议。

javascript:就是让浏览器执行一段js代码。a标签的href属性是支持协议的，同时也支持这些伪装的协议。

href='javascript:....;',首先浏览器会执行其中的js代码，然后把执行结果返回给href属性，如果结果不是undefined，则做一些操作，如打开链接，如果是undefiend，则不做任何动作。

void关键字解释

void是js中的一个操作符，虽然我们对这个操作符除了在a标签之外用的很少，但是任何版本的浏览器都支持它。

void操作符将执行一段表达式，然后返回undefined。无论表达式是什么，void操作符总是恒定返回undefined属性。

void expression;
void 0;
void (0);

void（0）中的括号不是void操作符要求的，括号是要执行的表达式的一部分，有没有括号的意思是一样的，只是一种习惯写法而已。

我们可以写一段代码测试一下void的功能

var rst=void function testvoid() {
   console.log("mooshine");
    return "mooshine";
}();
console.log(rst)

运算结果如下：

其中function函数后面加的小括号表示是自执行函数，也就变成了函数表达式，前面就可以通过void操作符来运算他了。

在函数中虽然用return语句指定返回结果，但是由于void操作符的作用，返回结果仍然是undefined。

所以我们就可以在a标签的href属性中使用javascript:void(0);来避免跳转，同时使用onclick属性做一些操作，把a标签作为一个伪button元素。

javascript:;

javascript:;的写法跟javascript:void(0);在含义上是一致的，返回的结果也是undefined，所以可以用javascript:;替代javascript:void(0); 毕竟javascript:;比javascript:void(0)少7个字符呢，反正我是比较懒，喜欢用javascript:;来设置href属性的。

a标签href的其他可能伪协议

a标签的href还有一些其他的写法用来实现一些特定功能

href="#id" 锚文本

通过#号指向同一文章中id为id的元素，并将此元素显示在浏览器视窗中，叫做“锚文本”,href="#"和href="#top"是相同的，锚点都是指向文章开头。

href="mailto:" a标签打开邮件程序

<a href="mailto:mooshine@163.com">向我发送邮件</a>

mailto:伪协议用来打开客户端的邮件程序，向指定的邮箱发送邮件。

href="tel:" a标签拨打电话

<a href="tel:8888888">88888888</a>

通过tel:伪协议，在手机端可以调用用户拨打电话的程序，并将tel中的电话号码显示为拨出号码。

a标签target属性介绍

a标签有一个target属性，用来指示浏览器打开链接的方式，此属性有几个可选值

target='_self'

在当前窗口打开链接

target='_blank'

在新窗口打开链接

target='_parent'

在frameset或者iframe嵌套的页面中，表示在父窗口打开链接，否则_parent和_self相同

target='_top'

在frameset或者iframe嵌套的页面中，表示顶层窗口，否则_top和_self相同

target='xxx'

在指定id或者name为xxx的iframe中打开窗口，这里如果要良好的兼容性，iframe的id和name的属性值都要为xxx。

a标签H5的新属性

H5中对a标签添加了一些新属性，简化我们一些功能的实现。

a标签的down属性

down属性表示一个a标签的href所指定的url地址不要作为页面打开，要作为文件下载。

<a href="images/egg.jpg" download="mooshine">下载图片</a>

down的属性的属性值会作为下载文件的文件名。此文件名允许用户修改，不过在chrome等一些浏览器会直接下载，而不会弹出另存为的对话框。

使用down属性还可以把canvas.toDataURL()的url设置为a标签的href属性，将canvas生成的图片下载到本地，免去了与服务器的交互。

a标签down属性支持性

目前a标签的down属性支持不是很完善，ie要到edge 13才支持，safari不支持，如果不是出于安全性原因的问题相信safari很快也会支持的。

很快我们就可以使用a标签的down属性来实现文件的下载功能。这多么酷炫，多么令人期待啊。

结语：

 a标签是很基础的html标签了，文中提到的用法，大家也都很熟悉，缺少的也就是对这些用法问个为什么。可能你会问，你这些都是自己知道的么，肯定不是啊，没有人生下来就知道的，我也是通过文档资料了解到的，然后自己写代码做一些测试，做深入理解。那么就是有参考文献了啊，是的，有参考文献，一般就是微软出的DHTML文档，js文档，MDN的官网，Microsoft的开发者指南官网这里几个地方。微软做的比较好，都是中文文献，就是服务器在国外，访问速度有点慢。MDN对我们国内人来说就有些差了。全是英文的，对于我这种英语水平不好的人看起来是相当费劲的，要一边看，一边查字典，不过也有好处，自己的英文词汇来那个确实也跟着看文档提升了不少。