JavaScript-在带有js功能的链接中,链接属性href的值用“#”或“javascript:void(0)”哪种更好?

JavaScript-在带有js功能的链接中,链接属性href的值用“#”或“javascript:void(0)”哪种更好?

清晨说ぺ晚安 发布于 2017-07-01 字数 257 浏览 1106 回复 10

当我们在创建一个链接时,其主要作用是用来执行JS代码的,下面两种写法哪种更好?

<a href="javascript:void(0)" onclick="jsSubmit();">链接</a>
<a href="#" onclick="jsSubmit();">链接</a>

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(10

清晨说ぺ晚安 2017-11-08 10 楼

个人观点 用第二个吧。。 因为我有一个记忆深刻的教训。。
之前 在显示验证码 的时候 图片上加了更换验证码的js,但是旁边还有一个文字更换验证码的连接,写法就是类似 <a href="javascript:void(0)" onclick="jsSubmit();">链接</a> 这样,为了不连接到锚点所以加了javascript:void(0), 悲催的是ie6下 点图片可以更换,但是点文字连接却出不来,原有的图片也不显示了。由于还有其他复杂的代码,就对这个问题找了一下午。最后改为第二种,在函数中增加 return false, 解决。

想挽留 2017-11-01 9 楼

我一般都是这样:

<a href="javascript:;" onclick="jsSubmit();">链接</a>

泛泛之交 2017-10-25 8 楼

<a href ="#"></a>点击这个的话,会跳转到页面的顶端,
不想让页面跳转就用javascript:void(0)

虐人心 2017-10-03 7 楼

用"#"会跳转到顶端,从用户体验方面来说,用javascript。但是,我们知道美工做界面的时候都用"#",这样方便程序员修改,这个链接基本是不会空的,不然要链接干什么?

灵芸 2017-09-16 6 楼

第一种和第二种都不好

 <a href="javascript:void(0)" onclick="jsSubmit();">链接</a>

这个的问题是存在歧义,为什么先执行onclick后href?反过来或者在冷门浏览器下则出现BUG

 <a href="#" onclick="jsSubmit();">链接</a>

这个问题是submit后会跳到页面顶部,显然to #并不是正确逻辑需要

我认为正确的方法是:

 <a href="javascript:jsSubmit();return false;">链接</a>

灵芸 2017-09-14 5 楼

我觉得还有第三种方式创建链接:
<a href="###" onclick="jsSubmit();">链接</a>
这样当你点击a标签时就不会返回到顶部了,也可以省略return false

归属感 2017-09-01 4 楼

推荐使用第二种,第一个的话在ie6下有时候会触发一些莫名其妙的bug

灵芸 2017-08-28 3 楼

一般来说用第二个,因为第一个#表示的是跳转到页面顶部,如果你停留的位置不在第一屏的话,产生的体验很差!第二个则是取消了a标签的默认href事件,点击该标签不会执行任何操作!

瑾兮 2017-08-20 2 楼

"#"包含了一个位置信息
默认的锚点是#top 也就是网页的上端
而javascript:void(0) 仅仅表示一个死链接
这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首
而javascript:void(0) 则不是如此
所以调用脚本的时候最好用void(0)

JavaScript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。
void 操作符用法格式如下:
1. javascript:void (expression_r_r)
2. javascript:void expression_r_r
expression_r_r是一个要计算的 JavaScript 标准的表达式。
表达式外侧的圆括号是可选的,但是写上去是一个好习惯。
我们可以使用 void 操作符指定超级链接。
表达式会被计算但是不会在当前文档处装入任何内容。
面的代码创建了一个超级链接,当用户点击以后不会发生任何事。
当用户点击链接时,void(0) 计算为 0,但在 JavaScript 上没有任何效果。
<a href="javascript:void(0)">单击此处什么也不会发生</a>
也就是说,要执行某些处理,但是不整体刷新页面的情况下,可以使用void(0),但是在需要对页面进行refresh的情况下,那就要仔细了。
其实我们可以这样用<a href="javascript:void(document.form.submit())">,这句话会进行一次submit操作。那什么情况下用void(0)比较多呢,无刷新,当然是Ajax了,看一下Ajax的web页面的话,一般都会看到有很多的void(0),:) ,所以在使用void(0)之前,最好先想一想,这个页面是否需要整体刷新。

如果是个# ,就会出现跳到顶部的情况,解决方法:
1:<a href="####"></a>
2:<a href="javascript:void(0)"></a>
3:<a href="javascript:void(null)"></a>
4:<a href="#" onclick="return false"></a>
5:<span style="cursor:hand"></span>(好像在FF中不能显示)
参考:
http://blog.csdn.net/fightplane/article/details/5190037

归属感 2017-08-01 1 楼

第二种加个return false 最佳答案!什么情况都兼容了