href 表达式 <a href="javascript:;"></a> 有什么作用?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7755088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 03:29:19  来源:igfitidea点击:

What does href expression <a href="javascript:;"></a> do?

javascript

提问by John Livermore

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>

回答by Spudley

An <a>element is invalid HTML unless it has either an hrefor nameattribute.

一个<a>元素是无效的 HTML,除非它有一个hreforname属性。

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 hrefattribute.

如果您希望它正确呈现为链接(即下划线、手形指针等),那么它只有在具有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 hrefattribute. 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 事件代码,当点击链接时会触发这些代码,这将是他想要实际发生的事情,但他希望它看起来像一个普通的<a>标签链接。

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 hrefis one of them, and although it isn't the best solution, it does work.

有办法解决这些问题。在 中使用空的 Javascript 代码href就是其中之一,虽然它不是最好的解决方案,但它确实有效。

回答by Eonasdan

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.

单击该链接将触发警报。

回答by Pau Giner

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 #nois a non-defined anchor in the document.

更简洁的选择是使用文档中的href="#no"where#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="#"
  • Avoids the use of javascript
  • 避免空 href="#" 的“移至顶部”效果
  • 避免使用 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.

由于<a>元素不充当链接,因此在这些情况下的最佳选择不是使用<a>元素而是使用 a<div>并提供所需的类似链接的样式。

回答by bjornd

<a href="javascript:alert('Hello');"></a>

is just shorthand for:

只是简写:

<a href="" onclick="alert('Hello'); return false;"></a>

回答by Daan Wilmer

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 运行时(就像你的例子)它什么都不做。

回答by b k

Refer to this:

参考这个:

<a href="Http://WWW.stackoverflow.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>

回答by Gowri

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

javascript:tells the browser going to write javascript code

javascript:告诉浏览器要编写 javascript 代码

回答by Gowri

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 onClickbut not as a javascript URL.

例如,handler_function(this.id)可以作为onClickjavascript URL 但不能作为 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.

因此,您可以选择编写符合标准的迂腐代码,您必须手动调整每个超链接的调用,或者编写一次编写并随处使用的稍微非标准的代码。

回答by Amir Fo

So its used to write js codes inside of hrefinstead of event listeners like onclickand avoiding #links in hrefto make atags valid for html.

因此,它用于在内部编写 js 代码,href而不是像这样的事件侦听器,onclick并避免使用#链接href使a标签对 html 有效。

I had a research on how to use javascript:inside of hrefattribute.

我研究了如何javascript:href属性内部使用。

<a href="
     javascript:
        a = 4;
        console.log(a++); 
        a += 2; 
        console.log(a++); 
        if(a < 6){ 
            console.log('a is lower than 6');
        } 
        else 
            console.log('a is greater than 6');
        function log(s){
            console.log(s);
        }
        log('function inplimentation working too');

">Click here</a>

Through this code, you can even write js codes there instead of only calling functions.

通过这段代码,你甚至可以在那里编写js代码,而不仅仅是调用函数。



Tested in chrome Version 68.0.3440.106 (Official Build) (64-bit)

在 chrome 版本 68.0.3440.106(官方版本)(64 位)中测试

Tested in Firefox Quantom 61.0.1 (64-bit)

在 Firefox Quantom 61.0.1(64 位)中测试

回答by Imran Nazir

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.

人们应该避免遵循线程中提到的不必要的事情。