简述

在操作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表达式,带不带括号都可以,但是习惯上带上括号比较好,建议也是带上括号。


Logo

助力广东及东莞地区开发者,代码托管、在线学习与竞赛、技术交流与分享、资源共享、职业发展,成为松山湖开发者首选的工作与学习平台

更多推荐