我应该在JavaScript链接中使用哪个“href”值，“＃”或“javascript：void（0）”？

以下是构build链接的两种方法，其中唯一目的是运行JavaScript代码。 在function，页面加载速度，validation目的等方面哪个更好？

function myJsFunc() { alert("myJsFunc"); } 

 <a href="#" onclick="myJsFunc();">Run JavaScript Code</a> 

要么

 function myJsFunc() { alert("myJsFunc"); } 

  <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a> 

Answer 1

我使用javascript:void(0) 。

三个原因。 鼓励在开发团队中使用#不可避免地会导致一些使用函数的返回值，如下所示：

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

但是，他们忘了在onclick中使用return doSomething() ，只是使用doSomething() 。

避免#第二个原因是最终return false; 如果被调用的函数抛出一个错误，将不会执行。 因此，开发者也必须记得在被调用的函数中适当地处理任何错误。

第三个原因是有些情况下， onclick事件属性是dynamic分配的。 我更喜欢能够调用一个函数或dynamic分配它，而不必为一个附件或其他方法专门编写函数。 因此，我的onclick （或任何东西）在HTML标记看起来像这样：

 onclick="someFunc.call(this)" 

要么

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

使用javascript:void(0)可以避免所有上述的麻烦，而且我还没有发现任何缺点的例子。

所以如果你是一个独立的开发人员，那么你可以明确地做出自己的select，但是如果你是一个团队，你必须声明：

使用href="#" ，确保onclick始终包含return false; 最后，任何被调用的函数都不会抛出一个错误，并且如果您将函数dynamic添加到onclick属性，请确保不抛出错误，并返回false 。

要么

使用href="javascript:void(0)"

第二个显然更容易沟通。

Answer 2

都不是。

如果你可以有一个真正的URL作为HREF使用。 如果有人点击您的链接打开新的标签或禁用了JavaScript，onclick将不会触发。

如果这是不可能的，那么你至less应该用JavaScript和适当的单击事件处理程序将锚标签注入到文档中。

我意识到这并非总是可行的，但在我看来，它应该争取在开发任何公共网站。

查看Unobtrusive JavaScript和Progressive增强 （包括维基百科）。

Answer 3

做<a href="#" onclick="myJsFunc();">Link</a>或<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>或其他任何包含onclick属性的东西 – 五年前还可以，但现在这可能是一个不好的做法。 原因如下：

1. 它促进了突兀的JavaScript的实践 – 结果变得难以维护和难以扩展。 更多关于这个在Unobtrusive JavaScript中 。

2. 你花时间编写令人难以置信的过于冗长的代码 – 这对你的代码库几乎没有任何好处（如果有的话）。

3. 现在有更好，更容易，更可维护和可扩展的方式来达到预期的效果。

不显眼的JavaScript方式

根本没有href属性！ 任何好的CSS重置都会照顾到缺less的默认光标样式，所以这不是问题。 然后使用优雅和不显眼的最佳实践来附加您的JavaScriptfunction – 当您的JavaScript逻辑保留在JavaScript中而不是在您的标记中时，这些function更易于维护 – 当您开始开发大规模JavaScript应用程序时需要将您的逻辑分解为黑盒子组件和模板。 大型JavaScript应用程序体系结构中的更多内容

简单的代码示例

 // Cancel click event $('.cancel-action').click(function(){ alert('Cancel action occurs!'); }); // Hover shim for Internet Explorer 6 and Internet Explorer 7. $(document.body).on('hover','a',function(){ $(this).toggleClass('hover'); }); 

 a { cursor: pointer; color: blue; } a:hover,a.hover { text-decoration: underline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="cancel-action">Cancel this action</a> 

Answer 4

'#'会把用户带回到页面的顶部，所以我通常使用void(0) 。

javascript:; 也performance得像javascript:void(0);

Answer 5

我会诚实地build议。 我会使用一个风格化的<button></button>的行为。

 button.link { display:inline-block; position:relative; background-color: transparent; cursor: pointer; border:0; padding:0; color:#00f; text-decoration:underline; } 

这样你可以分配你的onclick。 我也build议通过脚本绑定，而不是使用element标签上的onclick属性。 唯一的问题是旧版IE中伪造的3d文本效果，无法禁用。

---

如果您必须使用A元素，请使用javascript:void(0); 原因已经提到。

• 如果您的onclick事件失败，将总是拦截。
• 不会有错误的加载调用发生，或者基于散列变化触发其他事件
• 哈希标记可能会导致意外的行为，如果点击通过（onclick抛出），避免它，除非它是一个适当的下降行为，并且你想改变导航历史。

注意：您可以用一个string（如javascript:void('Delete record 123')replace0 ，它可以作为一个额外的指标，显示点击的实际效果。

Answer 6

第一个，最好有一个真正的链接，以防用户禁用JavaScript。 只要确保返回false以防止在JavaScript执行时触发点击事件。

 <a href="#" onclick="myJsFunc(); return false;">Link</a> 

如果你使用Angular2，这种方式工作：

<a [routerLink]="" (click)="passTheSalt()">Click me</a> 。

看到这里https://stackoverflow.com/a/45465728/2803344

Answer 7

理想情况下，你会这样做：

 <a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a> 

或者，甚至更好的是，您将在HTML中使用默认的动作链接，并且在DOM呈现之后通过JavaScript不显眼地将onclick事件添加到该元素，从而确保如果JavaScript不存在/有无用的事件处理程序谜语，可能会混淆（或至less分散）您的实际内容。

Answer 8

不，如果你问我，

如果你的“链接”的唯一目的是运行一些JavaScript代码，那么它不会被视为一个链接。 而是一段与JavaScriptfunction耦合的文本。 我build议使用带有onclick handler的<span>标签和一些基本的CSS来模仿链接。 链接用于导航，如果您的JavaScript代码不是用于导航的，则不应该是<a>标签。

例：

 function callFunction() { console.log("function called"); } 

 .jsAction { cursor: pointer; color: #00f; text-decoration: underline; } 

 <p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p> 

Answer 9

使用#会产生一些有趣的动作，所以如果您想节省JavaScript bla, bla,input努力，我会build议使用#self 。

Answer 10

我使用以下

 <a href="javascript:;" onclick="myJsFunc();">Link</a> 

代替

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

Answer 11

我同意其他地方的build议，指出你应该在href属性中使用正则URL，然后在onclick中调用一些JavaScript函数。 缺点是，他们automaticaly在呼叫后添加return false 。

这种方法的问题是，如果function不起作用或者如果有任何问题，链接将变得不可点击。 Onclick事件将始终返回false ，因此不会调用正常的URL。

有非常简单的解决scheme。 如果函数正常工作，让函数返回true 。 然后使用返回值来确定是否应该取消点击：

JavaScript的

 function doSomething() { alert( 'you clicked on the link' ); return true; } 

HTML

 <a href="path/to/some/url" onclick="return !doSomething();">link text</a> 

---

请注意，我否定了doSomething()函数的结果。 如果有效，它将返回true ，所以它将被否定（ false ）， path/to/some/URL将不会被调用。 如果函数返回false （例如，浏览器不支持在函数中使用的东西或其他任何错误），则它被否定为true并调用path/to/some/URL 。

Answer 12

#比javascript:anything ，但是下面更好：

HTML：

 <a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a> 

JavaScript的：

 $(function() { $(".some-selector").click(myJsFunc); }); 

您应该始终努力寻求优雅的退化（如果用户没有启用JavaScript，并且符合规格和预算）。 而且，直接在HTML中使用JavaScript属性和协议被认为是不好的forms。

Answer 13

除非您使用JavaScript编写链接（以便您知道该链接在浏览器中启用），否则应该为正在浏览JavaScript的用户提供适当的链接，然后阻止您点击链接的默认操作事件处理器。 这样，启用了JavaScript的用户将运行该function，禁用JavaScript的用户将跳转到相应的页面（或同一页面内的位置），而不是仅仅点击链接而没有任何事情发生。

Answer 14

我推荐使用<button>元素， 特别是如果控件应该在数据中产生更改。 （像POST一样。）

如果你不注意地注入元素，这是一种渐进式的增强，那会更好。 （看这个评论 。）

Answer 15

肯定哈希（ # ）更好，因为在JavaScript中它是一个伪代码：

1. 污染历史
2. 实例化引擎的新副本
3. 在全球范围内运行，不尊重事件系统。

当然“＃”与防止默认动作的onclick处理程序[更好]。 而且，只有当用户发送页面上的某个合适的锚点（只有＃会发送到顶部）时，出现运行JavaScript的链接才是真正的“链接”。 你可以简单地模拟与样式表链接的外观和感觉，并忘记所有的href。

另外，关于cowgod的build议，特别是这个： ...href="javascript_required.html" onclick="...这是很好的方法，但是它并没有区分“禁用JavaScript”和“onclick失败”场景。

Answer 16

我通常去

 <a href="javascript:;" onclick="yourFunction()">Link description</a> 

它比javascript：void（0）更短，并且执行相同的操作。

Answer 17

我会用：

 <a href="#" onclick="myJsFunc();return false;">Link</a> 

原因：

1. 这使得href简单，search引擎需要它。 如果您使用其他任何东西（如string），它可能会导致404 not found错误。
2. 当鼠标hover在链接上时，它不显示它是一个脚本。
3. 通过使用return false; ，页面不会跳转到顶部或打破backbutton。

Answer 18

最好是使用jQuery，

 $(document).ready(function() { $("a").css("cursor", "pointer"); }); 

并省略href="#"和href="javascript:void(0)" 。

锚标记标记将会像

 <a onclick="hello()">Hello</a> 

够简单！

Answer 19

我select使用javascript:void(0) ，因为使用这个可以防止右击打开内容菜单。

Answer 20

所以，当你使用一个<a /> href="#"标签来做一些JavaScript事情时，如果你也使用href="#" ，你可以在事件结束处添加return false （如果是内联事件绑定），如：

 <a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a> 

或者你可以用JavaScript来改变href属性：

 <a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a> 

要么

 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a> 

---

但是在语义上，所有上述的方法来实现这个是错误的（虽然它工作正常） 。 如果没有创build任何元素来浏览页面，并有一些与JavaScript相关的东西，那么它不应该是一个<a>标签。

您可以简单地使用<button />来代替按照您的需要来做事情或其他任何元素，比如b，span或其他适合的元素，因为您可以在所有元素上添加事件。

---

所以，使用<a href="#"> 有一个好处 。 当你做a href="#"时候，你会在该元素上获得游标指针。 对于这一点，我认为你可以使用CSS这样的cursor:pointer; 这也解决了这个问题。

最后，如果您是从JavaScript代码本身绑定事件，那么您可以使用event.preventDefault()来实现这一点，如果您使用<a>标记，但是如果您没有使用<a>标记这个，你有一个优势，你不需要这样做。

所以，如果你看到了，最好不要为这种东西使用标签。

Answer 21

如果你碰巧使用AngularJS ，你可以使用下面的代码：

 <a href="">Do some fancy JavaScript</a> 

哪个不会做任何事情。

此外

• 它不会把你带到页面的顶部，就像（＃）一样
  • 因此，您不需要使用JavaScript显式返回false
• 简短简洁

Answer 22

不要仅仅为了运行JavaScript而使用链接。

使用href =“＃”将页面滚动到顶部; 使用void（0）会在浏览器中产生导航问题。

相反，使用链接以外的元素：

 <span onclick="myJsFunc()" class="funcActuator">myJsFunc</span> 

并用CSS来devise它：

 .funcActuator { cursor: default; } .funcActuator:hover { color: #900; } 

Answer 23

如果没有href也许没有理由使用锚标签。

您几乎可以在每个元素上附加事件（点击，hover等），为什么不使用span或div ？

And for users with JavaScript disabled: if there isn't a fallback (for example, an alternative href ), they should at least not be able to see and interact with that element at all, whatever it is an <a> or a <span> tag.

Answer 24

Usually, you should always have a fall back link to make sure that clients with JavaScript disabled still has some functionality. This concept is called unobtrusive JavaScript.

Example… Let's say you have the following search link:

 <a href="search.php" id="searchLink">Search</a> 

You can always do the following:

 var link = document.getElementById('searchLink'); link.onclick = function() { try { // Do Stuff Here } finally { return false; } }; 

That way, people with JavaScript disabled are directed to search.php while your viewers with JavaScript view your enhanced functionality.

Answer 25

I tried both in google chrome with the developer tools, and the id="#" took 0.32 seconds. While the javascript:void(0) method took only 0.18 seconds. So in google chrome, javascript:void(0) works better and faster.

Answer 26

Depending on what you want to accomplish, you could forget the onclick and just use the href:

 <a href="javascript:myJsFunc()">Link Text</a> 

It gets around the need to return false. I don't like the # option because, as mentioned, it will take the user to the top of the page. If you have somewhere else to send the user if they don't have JavaScript enabled (which is rare where I work, but a very good idea), then Steve's proposed method works great.

 <a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a> 

Lastly, you can use javascript:void(0) if you do not want anyone to go anywhere and if you don't want to call a JavaScript function. It works great if you have an image you want a mouseover event to happen with, but there's not anything for the user to click on.

Answer 27

When I've got several faux-links, I prefer to give them a class of 'no-link'.

Then in jQuery, I add the following code:

 $(function(){ $('.no-link').click(function(e){ e.preventDefault(); }); }); 

And for the HTML, the link is simply

 <a href="/" class="no-link">Faux-Link</a> 

I don't like using Hash-Tags unless they're used for anchors, and I only do the above when I've got more than two faux-links, otherwise I go with javascript:void(0).

 <a href="javascript:void(0)" class="no-link">Faux-Link</a> 

Typically, I like to just avoid using a link at all and just wrap something around in a span and use that as a way to active some JavaScript code, like a pop-up or a content-reveal.

Answer 28

I believe you are presenting a false dichotomy. These are not the only two options.

I agree with Mr. D4V360 who suggested that, even though you are using the anchor tag, you do not truly have an anchor here. All you have is a special section of a document that should behave slightly different. A <span> tag is far more appropriate.

Answer 29

I'm basically paraphrasing from this practical article using progressive enhancement . The short answer is that you never use javascript:void(0); or # unless your user interface has already inferred that JavaScript is enabled, in which case you should use javascript:void(0); 。 Also, do not use span as links, since that is semantically false to begin with.

Using SEO friendly URL routes in your application, such as /Home/Action/Parameters is a good practice as well. If you have a link to a page that works without JavaScript first, you can enhance the experience afterward. Use a real link to a working page, then add an onlick event to enhance the presentation.

这里是一个例子。 Home/ChangePicture is a working link to a form on a page complete with user interface and standard HTML submit buttons, but it looks nicer injected into a modal dialog with jQueryUI buttons. Either way works, depending on the browser, which satisfies mobile first development.

 <p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p> <script type="text/javascript"> function ChangePicture_onClick() { $.get('Home/ChangePicture', function (htmlResult) { $("#ModalViewDiv").remove(); //Prevent duplicate dialogs $("#modalContainer").append(htmlResult); $("#ModalViewDiv").dialog({ width: 400, modal: true, buttons: { "Upload": function () { if(!ValidateUpload()) return false; $("#ModalViewDiv").find("form").submit(); }, Cancel: function () { $(this).dialog("close"); } }, close: function () { } }); } ); return false; } </script> 

Answer 30

You can also write a hint in an anchor like this:

 <a href="javascript:void('open popup image')" onclick="return f()">...</a> 

so the user will know what this link does.