I have seen the following href used in webpages from time to time. However, I don't understand what this is trying to do or the technique. Can someone elaborate please?
我经常在网页中看到以下href。然而,我不明白这是在做什么,或者是技术。谁能精心设计的吗?
<a href="javascript:;"></a>
9 个解决方案
#1
157
An <a>
element is invalid HTML unless it has either an href
or name
attribute.
If you want it to render correctly as a link (ie underlined, hand pointer, etc), then it will only do so if it has a href
attribute.
如果您希望它以链接的形式正确呈现(如下划线、指针等),那么它只有在具有href属性时才会这样做。
Code like this is therefore sometimes used as a way of making a link, but without having to provide an actual URL in the href
attribute. The developer obviously wanted the link itself not to do anything, and this was the easiest way he knew.
因此,这样的代码有时被用作创建链接的一种方式,但不需要在href属性中提供实际的URL。开发人员显然希望链接本身不做任何事情,这是他知道的最简单的方式。
He probably has some javascript event code elsewhere which is triggered when the link is clicked, and that will be what he wants to actually happen, but he wants it to look like a normal <a>
tag link.
他可能在其他地方有一些javascript事件代码,当链接被单击时,这些代码将被触发,这将是他真正希望发生的,但是他希望它看起来像一个正常的标记链接。
Some developers use href='#'
for the same purpose, but this causes the browser to jump to the top of the page, which may not be wanted. And he couldn't simply leave the href blank, because href=''
is a link back to the current page (ie it causes a page refresh).
有些开发人员出于同样的目的使用href='#',但是这会导致浏览器跳到页面的顶部,这可能是不需要的。而且他不能简单地将href留空,因为href= "是返回当前页面的链接(即它导致页面刷新)。
There are ways around these things. Using an empty bit of Javascript code in the href
is one of them, and although it isn't the best solution, it does work.
有很多方法可以解决这些问题。在href中使用一个空的Javascript代码就是其中之一,尽管它不是最好的解决方案,但它确实有效。
#2
21
basically instead of using the link to move pages (or anchors), using this method launches a javascript function(s)
基本上,使用此方法可以启动一个javascript函数,而不是使用链接来移动页面(或锚)
<script>
function doSomething() {
alert("hello")
}
</script>
<a href="javascript:doSomething();">click me</a>
clicking the link will fire the alert.
单击该链接将触发警报。
#3
21
There are several mechanisms to avoid a link to reach its destination. The one from the question is not much intuitive.
有几种机制可以避免链接到达目的地。这个问题不是很直观。
A cleaner option is to use href="#no"
where #no
is a non-defined anchor in the document.
更简洁的选项是使用href="#no",其中#no是文档中未定义的锚。
You can use a more semantic name such as #disable, or #action to increase readability.
您可以使用更语义化的名称,如#disable,或#action来增加可读性。
Benefits of the approach:
这种方法的好处:
- Avoids the "moving to the top" effect of the empty href="#"
- 避免空href="#"的“移动到顶部”效果
- Avoids the use of javascript
- 避免使用javascript
Drawbacks:
缺点:
- You must be sure the anchor name is not used in the document.
- 您必须确保在文档中没有使用锚名。
Since the <a>
element is not acting as a link, the best option in these cases is not using an <a>
element but a <div>
and provide the desired link-like style.
#4
7
Refer to this:
指的是这个:
<a href="Http://WWW.*.com">Link to the website opened in different tab</a>
<a href="#MyDive">Link to the div in the page(look at the chaneged url)</a>
<a href="javascript:;">Nothing happens if there is no javaScript to render</a>
#5
5
<a href="javascript:alert('Hello');"></a>
is just shorthand for:
只是缩写:
<a href="" onclick="alert('Hello'); return false;"></a>
#6
3
It is a way of making a link do absolutely nothing when clicked (unless Javascript events are bound to it).
当单击(除非Javascript事件绑定到它)时,这是一种创建链接的方法。
It is a way of running Javascript instead of following a link:
这是一种运行Javascript而不是遵循链接的方式:
<a href="Javascript: doStuff();">link</a>
When there isn't actually javascript to run (like your example) it does nothing.
当没有javascript运行时(比如你的例子),它什么也不做。
#7
3
Old thread but thought I'd just add that the reason developers use this construct is not to create a dead link, but because javascript URLs for some reason do not pass references to the active html element correctly.
旧的线程,但是我想补充一点,开发人员使用这个构造的原因不是要创建一个死链接,而是因为出于某种原因,javascript url没有将引用正确地传递给活动的html元素。
e.g. handler_function(this.id)
works as onClick
but not as a javascript URL.
例如,handler_function(this.id)作为onClick工作,而不是作为javascript URL工作。
Thus it's a choice between writing pedantically standards-compliant code that involves you in having to manually adjust the call for each hyperlink, or slightly non-standard code which can be written once and used everywhere.
因此,在编写符合标准的标准代码时,您需要手动调整每一个超链接的调用,或者稍微有些非标准的代码,这些代码可以编写一次,并在任何地方使用。
#8
1
<a href="javascript:void(0);"></a>
javascript:
tells the browser going to write javascript code
告诉浏览器将要编写javascript代码
#9
0
The best way to always render a link properly is with the css as follows:
正确呈现链接的最佳方式是使用css:
a {cursor: pointer !important}
One should avoid to follow un-necessary things like mentioned in the thread.
人们应该避免遵循线程中提到的不必要的东西。
#1
157
An <a>
element is invalid HTML unless it has either an href
or name
attribute.
If you want it to render correctly as a link (ie underlined, hand pointer, etc), then it will only do so if it has a href
attribute.
如果您希望它以链接的形式正确呈现(如下划线、指针等),那么它只有在具有href属性时才会这样做。
Code like this is therefore sometimes used as a way of making a link, but without having to provide an actual URL in the href
attribute. The developer obviously wanted the link itself not to do anything, and this was the easiest way he knew.
因此,这样的代码有时被用作创建链接的一种方式,但不需要在href属性中提供实际的URL。开发人员显然希望链接本身不做任何事情,这是他知道的最简单的方式。
He probably has some javascript event code elsewhere which is triggered when the link is clicked, and that will be what he wants to actually happen, but he wants it to look like a normal <a>
tag link.
他可能在其他地方有一些javascript事件代码,当链接被单击时,这些代码将被触发,这将是他真正希望发生的,但是他希望它看起来像一个正常的标记链接。
Some developers use href='#'
for the same purpose, but this causes the browser to jump to the top of the page, which may not be wanted. And he couldn't simply leave the href blank, because href=''
is a link back to the current page (ie it causes a page refresh).
有些开发人员出于同样的目的使用href='#',但是这会导致浏览器跳到页面的顶部,这可能是不需要的。而且他不能简单地将href留空,因为href= "是返回当前页面的链接(即它导致页面刷新)。
There are ways around these things. Using an empty bit of Javascript code in the href
is one of them, and although it isn't the best solution, it does work.
有很多方法可以解决这些问题。在href中使用一个空的Javascript代码就是其中之一,尽管它不是最好的解决方案,但它确实有效。
#2
21
basically instead of using the link to move pages (or anchors), using this method launches a javascript function(s)
基本上,使用此方法可以启动一个javascript函数,而不是使用链接来移动页面(或锚)
<script>
function doSomething() {
alert("hello")
}
</script>
<a href="javascript:doSomething();">click me</a>
clicking the link will fire the alert.
单击该链接将触发警报。
#3
21
There are several mechanisms to avoid a link to reach its destination. The one from the question is not much intuitive.
有几种机制可以避免链接到达目的地。这个问题不是很直观。
A cleaner option is to use href="#no"
where #no
is a non-defined anchor in the document.
更简洁的选项是使用href="#no",其中#no是文档中未定义的锚。
You can use a more semantic name such as #disable, or #action to increase readability.
您可以使用更语义化的名称,如#disable,或#action来增加可读性。
Benefits of the approach:
这种方法的好处:
- Avoids the "moving to the top" effect of the empty href="#"
- 避免空href="#"的“移动到顶部”效果
- Avoids the use of javascript
- 避免使用javascript
Drawbacks:
缺点:
- You must be sure the anchor name is not used in the document.
- 您必须确保在文档中没有使用锚名。
Since the <a>
element is not acting as a link, the best option in these cases is not using an <a>
element but a <div>
and provide the desired link-like style.
#4
7
Refer to this:
指的是这个:
<a href="Http://WWW.*.com">Link to the website opened in different tab</a>
<a href="#MyDive">Link to the div in the page(look at the chaneged url)</a>
<a href="javascript:;">Nothing happens if there is no javaScript to render</a>
#5
5
<a href="javascript:alert('Hello');"></a>
is just shorthand for:
只是缩写:
<a href="" onclick="alert('Hello'); return false;"></a>
#6
3
It is a way of making a link do absolutely nothing when clicked (unless Javascript events are bound to it).
当单击(除非Javascript事件绑定到它)时,这是一种创建链接的方法。
It is a way of running Javascript instead of following a link:
这是一种运行Javascript而不是遵循链接的方式:
<a href="Javascript: doStuff();">link</a>
When there isn't actually javascript to run (like your example) it does nothing.
当没有javascript运行时(比如你的例子),它什么也不做。
#7
3
Old thread but thought I'd just add that the reason developers use this construct is not to create a dead link, but because javascript URLs for some reason do not pass references to the active html element correctly.
旧的线程,但是我想补充一点,开发人员使用这个构造的原因不是要创建一个死链接,而是因为出于某种原因,javascript url没有将引用正确地传递给活动的html元素。
e.g. handler_function(this.id)
works as onClick
but not as a javascript URL.
例如,handler_function(this.id)作为onClick工作,而不是作为javascript URL工作。
Thus it's a choice between writing pedantically standards-compliant code that involves you in having to manually adjust the call for each hyperlink, or slightly non-standard code which can be written once and used everywhere.
因此,在编写符合标准的标准代码时,您需要手动调整每一个超链接的调用,或者稍微有些非标准的代码,这些代码可以编写一次,并在任何地方使用。
#8
1
<a href="javascript:void(0);"></a>
javascript:
tells the browser going to write javascript code
告诉浏览器将要编写javascript代码
#9
0
The best way to always render a link properly is with the css as follows:
正确呈现链接的最佳方式是使用css:
a {cursor: pointer !important}
One should avoid to follow un-necessary things like mentioned in the thread.
人们应该避免遵循线程中提到的不必要的东西。