Javascript操作超链接
来源:互联网 发布:淘宝纯棉定义 编辑:程序博客网 时间:2024/05/17 23:06
简述
在操作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)" onclick="doSomething()">test</a>
R:<a href="#" onclick="doSomething();return false;">什么问题都解决了,包括浏览器不兼容问题</a> //或者直接使用href=""
J:<a href="#" onclick="alert();event.returnValue=false;">test</a>
K:<a href="URL" onclick="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" onclick="return false">data/a> <br>2:<a href="http://www.baidu.com" onclick="dothing()">data</a> <br>3:<a href="javascript:void(0))">data</a> <br>4: <a href="javascript:void(0))" onclick="dothing()">data</a>5:<a href="javascript:dothing();void(0)">data</a>6:<a href="javascript:dothing();void(0);dothing()" onclick="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表达式,带不带括号都可以,但是习惯上带上括号比较好,建议也是带上括号。
- Javascript操作超链接
- 超链接到javascript
- 超链接调用 JavaScript 函数
- JavaScript之更换超链接
- javascript超链接的变换
- javascript中的超链接语句
- 关于取消超链接(JavaScript取消超链接)
- 超链接相关操作
- JavaScript的Anchor超链接对象
- 点击超链接调用javascript函数
- 点击超链接调用javascript函数
- 利用超链接调用javascript函数
- JavaScript超链接设置打开窗口
- 点击超链接调用javascript函数
- poi 操作excel 生成超链接
- poi操作ppt添加超链接
- JavaScript应用超链接设置打开新窗口
- 如何正确利用超链接调用JavaScript函数
- Linux软链接和硬链接
- P1093 奖学金
- Redis 集群规范
- windows 查看端口占用程序
- 【面经笔记】深信服电话面试
- Javascript操作超链接
- Swift_方法func(在类、枚举、结构体中的声明和使用 mutating func初始化值可变)
- Linux环境下使用hexo+github搭建个人博客
- TF随笔-12
- PAT1011. A+B和C
- git跟踪远程分支并创建本地分支
- STM8L51X gpio中断
- 计算机的数字系统
- 计算多项式--Horner