Javascript操作超链接

简述

在操作HTML的<a>元素的时候或跳到href属性所指向的URL，但是很多时候我们需要通过超链接实现比较特殊的功能，接下来大概介绍超链接的其他高级用法。void是javascript的操作符，意思是：只执行表达式，但没有返回值。

通常有以下使用场景

一：点击后无动作

A:<a href="javascript：void(0);" >test</a> 
B:<a href="javascript：;" >test</a> 
C:<a href="####" >test</a>

A情况效果：点击链接后不产生任何效果。

有些博客建议不要使用，说是在某些浏览器当中会引起异常，但是看的一些前端框架中好多都使用这个，所以我比较怀疑这个说法的正确性。

B情况效果：点击链接后不产生任何效果。

在使用效果上跟A情况一样，现在好多都是用B代替了A。

C情况效果：很多博客上说是回到当前页面的顶部，但是我在360和IE浏览器上测试发现并不是回到当前页面的顶部，而是到了当前web应用的默认页面。

由于效果上可能会出现不同浏览器的不一致情况，建议不要使用这种方式。

二：点击后出现点击事件

H:<a href="javascript：void(0)" οnclick="doSomething()">test</a> 
R:<a href="#" οnclick="doSomething();return false;">什么问题都解决了,包括浏览器不兼容问题</a> //或者直接使用href="" 
J:<a href="#" οnclick="alert();event.returnValue=false;">test</a>

K:<a href="URL" οnclick="doSomething()">test</a> 

H情况效果：点击后不执行链接效果，而是直接执行onclick中的js代码，具体的效果根据JS代码来定。

R情况效果：点击后不执行链接效果，但是会执行doSomething函数中的JS代码。

J情况效果：点击后不执行连接效果，类似于R效果。

K情况效果：点击以后先执行doSomething函数，然后才打开URL对应的页面。

网上还有一种说法，就是讲“#”改为“####”可以防止点击链接跳转到当前页面的顶端，但是我在浏览器上试的时候发现并没有什么卵用。

三：以上两点都是结合网上的资料总结而来，接下来我说说自己的理解。

不管是第一还是第二点，最终的落脚点都在onclick这个事件函数。一方面，不管href的值是什么，只要让onclick函数返回false，那么连接就失去了作用。另一方面，假设onclick满足连接产生效果的要求，此时如果针对href的值进行定义也可实现使得连接失去作用，比如

1:<a href="http://www.baidu.com" οnclick="return false">data/a> <br>
2:<a href="http://www.baidu.com" οnclick="dothing()">data</a> <br>
3:<a href="javascript:void(0))">data</a> <br>
4: <a href="javascript:void(0))" οnclick="dothing()">data</a>
5：<a href="javascript:dothing();void(0)">data</a>
6：<a href="javascript:dothing();void(0);dothing()" οnclick="dothinga()">data</a>
7：<a href="javascript:alert('youyo')">data</a>
8：<a href="alert('youyo')">data</a>

对于1条，不管href是什么URL，只要onclick中的JS代码返回false，那么此链接就会失效。

对于2条，dothing没有显式指定返回false，默认符合连接产生效果的条件，因此会跳转到对应的URL。

对于3条，连接显然失去效果。

对于4条，先执行dothing，然后才跳转，跳转的时候发现是“JavaScript：void（0）”，因此默认不跳转，其实这里发生了跳转，这个逻辑是存在的，只是void这个针对void这个关键字而省略了真是的跳转结果。

对于5条，先执行dothing函数，然后执行void（0）。

对于6条，先执行onclick时间函数的dothinga函数，然后才执行href中的函数。

对于7条，则是直接执行href当中的alert。

对于8条，应该结合7条理解，点击的时候直接将href当中的值当做普通字符串对待，作为URL而跳转，所以符合总结中的猜想。

总结，有以上各种情况可猜想，

注意：

1:href当中的“JavaScript：”的作用是告诉当前的解析器，这里不是单纯的字符串，而是一段JS代码，从而可以推断出，解析器对href当中的值默认当做普通字符串处理，第8条进行了验证。

2:href当中的“void”并不是一个函数，而是一个关键字或者说是一个标识符，他表示void后边的字符串是一个Js表达式，带不带括号都可以，但是习惯上带上括号比较好，建议也是带上括号。