href =“”,href =“#”和href =“javascript:void(0)”之间有什么区别?

时间:2011-08-06 18:52:35

标签: html href

href=""href="#"href="javascript:void(0)"之间的区别是什么? 他们有什么不同的用途,什么时候比另一个更好?

6 个答案:

答案 0 :(得分:15)

href=""将重新加载当前页面

href="#"会将当前页面滚动到顶部

`href =“javascript:void(0)”将什么都不做。

通过使用其他两种方法中的任何一种方法从锚点击事件处理程序返回false,您可以获得javascript: void(0)的相同效果。

我更喜欢使用<a id="the-link" href="#">Link</a>,然后将事件处理程序绑定到我的javascript中的某个点击侦听器,如:

document.getElementById('the-link').onclick = function(){ 
    // Do stuff
    return false;
};

这样,既然你正在使用#,即使用户禁用了javascript,页面也不会重新加载(它只会滚动到顶部),我认为它看起来比{更清晰{1}}

答案 1 :(得分:4)

'#'会将用户带回页面顶部,因此我通常会使用void(0)

三个原因。鼓励使用#amoungst开发团队不可避免地导致一些人使用这样调用的函数的返回值:

function doSomething() {
    //some code
    return false;
}

但是他们忘记在return doSomething()中使用onclick,只使用doSomething()

避免#的第二个原因是最终返回false;如果被调用函数抛出错误,则不会执行。因此,开发人员还必须记住在被调用的函数中适当地处理任何错误。

第三个原因是存在动态分配onclick事件属性的情况。我更喜欢能够调用函数或动态分配它,而不必专门为一种附件或其他方法编写函数。因此,HTML标记中的onclick(或任何内容)如下所示:

onclick="someFunc.call(this)"

OR

onclick="someFunc.apply(this, arguments)"

使用javascript:void(0)可以避免上述所有问题,但我没有找到任何缺点的例子。

所以,如果你是一个单独的开发人员,那么你可以明确地做出自己的选择,但如果你作为一个团队工作,你必须说明:

use href="#",确保onclick始终包含return false;,任何被调用的函数都不会抛出错误,如果您动态地将函数附加到onclick属性,请确保除了不抛出错误,它返回false。

OR

use href="javascript:void(0)"

第二个显然更容易沟通。

答案 2 :(得分:0)

href =“”将链接到您当前所在的页面,从而有效地刷新页面。 href =“#”不会刷新页面,但使用#将使屏幕移动到页面顶部(浏览器有效地寻找没有名称的锚点)。 javascript:void(0)将阻止链接上发生任何事情。

当我想放入链接时我使用#,我不确定它们去哪里,例如在创建页面布局时。我通常使用表单操作=“”如果我想将表单发布到同一页面,但我从未亲自使用过href =“”或javascript:void(0)。

答案 3 :(得分:0)

如果您使用href="",某些浏览器可能会认为锚标记不是链接,而是锚。然后它不会得到链接的行为和事件。即使它适用于您可以测试的浏览器,也不使用空值更安全。

通常使用无名书签href="#"。它与链接到任何书签(例如href="#contact")相同,只是无名书签通向页面顶部。如果Javascript不起作用,这可以作为一个体面的后备,因为它只会将您带到顶部而不是在其他地方导航。有时您会看到开发人员忘记停止链接的默认操作,并且在脚本执行操作时页面跳转到顶部。

使用href="javascript:void(0)"是一种生成根本不带领的URL的方法,因此不会遵循该链接。它运行良好,但是当您指向大多数浏览器中的链接时,状态字段中会显示URL,但它看起来并不漂亮。

答案 4 :(得分:0)

它们是两个不同的链接:
1. href =“”将用户重定向到根页面。更像是默认页面或索引页面 2. href =“#”不会重定向用户,但也不会做任何事情,只需更改URL。它只是制作一个像按钮的URL我的意思是像按钮一样的锚。但无处可去。 3.如果你想用它做一些javascript工作。你可以使用

<button onclick="dothis()">Click me!</button>  
function dothis() {
// do what ever you want to do here
} 

第三种类型不会更改网址,也不会重定向!

答案 5 :(得分:0)

href属性定义链接资源的URL。如果anchor标签没有href标签,那么它将不会成为超链接。 href属性具有以下值:

1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.

Note: When we do not need to specified any url inside a anchor tag then use

<a href="javascript:void(0)">Test1</a>