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

以下是构建链接的两种方法，其唯一目的是运行JavaScript代码。在功能，页面加载速度，验证目的等方面哪个更好？

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>

我用javascript:void(0)。

三个原因。鼓励在#开发人员团队中使用，不可避免地导致某些人使用这样的函数的返回值：

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

但是后来他们忘记return doSomething()在onclick中使用，而只使用doSomething()。

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

第三个原因是在某些情况下onclick会动态分配事件属性。我更喜欢能够调用一个函数或动态分配它，而不必专门为一种附加方法或另一种附加方法编写函数。因此，我的onclickHTML标记（或其他内容）如下所示：

onclick="someFunc.call(this)"

要么

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

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

因此，如果您是一个孤独的开发人员，那么您可以清楚地做出自己的选择，但是如果您是团队合作，则必须声明以下两种情况：

请使用href="#"，确保onclick始终return false;在最后包含任何被调用的函数都不会引发错误，并且，如果您将函数动态地附加到onclick属性，请确保它不会抛出错误也返回false。

要么

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

第二种显然更容易沟通。

都不行

如果您可以使用一个有意义的实际URL，则可以将其用作HREF。如果有人在您的链接上单击鼠标中键以打开新标签，或者禁用了JavaScript，则onclick不会触发。

如果不可能，那么至少应使用JavaScript和适当的click事件处理程序将锚标记注入文档中。

我意识到这并非总是可能的，但我认为在开发任何公共网站时都应努力做到这一点。

查看Unobtrusive JavaScript和Progressive增强功能（均为Wikipedia）。

五年前，做某事<a href="#" onclick="myJsFunc();">Link</a>或<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>其他任何包含onclick属性的事都可以，尽管现在这可能是个坏习惯。原因如下：

1. 它促进了侵入性JavaScript的实践-事实证明，JavaScript难以维护且难以扩展。Unobtrusive JavaScript中的更多内容。

2. 您正在花费大量时间编写极其冗长的代码-这对您的代码库几乎没有好处（如果有的话）。

3. 现在有更好，更容易，更可维护和可扩展的方法来实现所需的结果。

简洁的JavaScript方式

只是根本没有href属性！任何好的CSS重置都会照顾到缺少的默认光标样式，因此这不是问题。然后，使用优美而毫不费力的最佳做法来附加JavaScript功能-当您的JavaScript逻辑停留在JavaScript中而不是在标记中时，这些做法将更具可维护性-当您开始开发大规模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>

黑盒Backbone.js示例

有关可伸缩的，黑盒的Backbone.js组件示例，请参见此处的jsfiddle示例。请注意，我们是如何利用不干扰JavaScript的做法，并且在少量的代码中，一个组件可以在页面上重复多次，而不会在不同组件实例之间产生副作用或冲突。惊人！

笔记

• 省略元素href上的属性a将导致使用tab键导航无法访问该元素。如果希望通过tab键可访问这些元素，则可以设置tabindex属性，或改用button元素。您可以轻松设置按钮元素的样式，使其看起来像Tracker1的answer中提到的普通链接。

• 省略元素href上的属性a将导致Internet Explorer 6和Internet Explorer 7不采用a:hover样式，这就是为什么我们添加了一个简单的JavaScript填充程序来a.hover代替的原因。完全可以，就像您没有href属性且没有正常降级一样，您的链接也将无法正常工作-而且您会担心更大的问题。

• 如果您希望您的操作在禁用JavaScript的情况下仍能正常工作，请使用具有某些URL属性的a元素，该href属性将通过手动而不是通过Ajax请求或其他方式执行操作的URL来执行。如果您正在执行此操作，那么您要确保event.preventDefault()对click调用执行一次操作，以确保单击按钮时它不会跟随链接。此选项称为正常降级。

'#'会将用户带回到页面顶部，所以我通常选择void(0)。

javascript:; 也表现得像 javascript:void(0);

老实说，我都不建议。我将使用一种程式化<button></button>的行为。

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

<p>A button that looks like a <button type="button" class="link">link</button>.</p>

这样，您可以分配onclick。我还建议通过脚本进行绑定，而不要使用onclickelement标签上的属性。唯一的难题是无法禁用的较旧IE中的伪3d文本效果。

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

• 万一您的onclick事件失败，它将始终拦截。
• 不会发生错误的加载调用，也不会基于哈希更改触发其他事件
• 如果单击失败（onclick抛出），则hash标签可能会导致意外行为，请避免使用它，除非它是适当的失败行为，并且您想更改导航历史记录。

注意：您可以将替换为0一个字符串，例如，javascript:void('Delete record 123')它可以作为一个额外的指示符，显示点击实际执行的操作。

第一个，理想情况下带有真实链接，以防用户禁用JavaScript。只要确保返回false即可防止JavaScript执行时触发click事件。

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

如果您使用Angular2，则这种方式有效：

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

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

你也不要问我。

如果您的“链接”的唯一目的是运行一些JavaScript代码，则该链接不符合链接的条件；而是一段带有JavaScript函数的文本。我建议使用带有<span>标签的标签onclick handler和一些基本的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>

理想情况下，您可以这样做：

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

或者，甚至更好的是，您将在HTML中具有默认的动作链接，并且会在DOM呈现后通过JavaScript将onclick事件毫不费力地添加到元素中，从而确保如果不存在/未使用JavaScript，您不会有无用的事件处理程序使您的代码混乱，并可能混淆（或至少分散您的注意力）您的实际内容。

使用只会#产生一些有趣的动作，因此，#self如果您希望节省的键入工作量，我建议您使用JavaScript bla, bla,。

我用以下

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

代替

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

我同意其他地方的建议，即应该在href属性中使用常规URL ，然后在onclick中调用一些JavaScript函数。缺陷在于，它们会return false在通话后自动添加。

这种方法的问题在于，如果该功能不起作用或出现任何问题，则该链接将变得不可单击。Onclick事件将始终返回false，因此不会调用普通URL。

有一个非常简单的解决方案。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调用。

#比更好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属性和协议也被认为是不好的形式。

我建议改用<button>元素，尤其是在控件应该在数据中进行更改的情况下。（有点像POST。）

如果您毫不夸张地注入元素（一种渐进增强），那就更好了。（请参阅此评论。）

除非您使用JavaScript写出链接（以便您知道已在浏览器中启用该链接），否则，理想情况下，应该为禁用了JavaScript进行浏览的用户提供正确的链接，然后在onclick中阻止该链接的默认操作事件处理程序。这样，那些启用了JavaScript的用户将运行该功能，而那些禁用JavaScript的用户将跳至适当的页面（或同一页面内的位置），而不仅仅是单击链接而没有任何反应。

绝对哈希（#）更好，因为在JavaScript中，它是一个伪方案：

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

当然，带有防止默认操作的onclick处理程序的“＃”要好得多。而且，唯一有运行JavaScript的链接并不是真正的“链接”，除非您在出现问题时将用户引导到页面上的某个合理锚点（只是＃会发送到顶部）。您可以简单地模拟与样式表链接的外观，而完全不用考虑href。

另外，关于cowgod的建议，尤其是这样：...href="javascript_required.html" onclick="...这是一个好方法，但是不能区分“ JavaScript禁用”和“ onclick失败”两种情况。

我通常去

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

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

我会用：

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

原因：

1. 这使得href简单的搜索引擎需要它。如果您使用其他任何东西（例如字符串），则可能会导致404 not found错误。
2. 当鼠标悬停在链接上时，并不表示它是脚本。
3. 使用return false;，页面不会跳到顶部或断开back按钮。

我选择use javascript:void(0)，因为使用此选项可能会阻止右键单击以打开内容菜单。但javascript:;更短，做同样的事情。

因此，当您使用<a />标记来做一些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>

但是从语义上讲，以上所有实现此目的的方法都是错误的（尽管效果很好）。如果未创建任何元素来导航页面并且具有与之相关联的一些JavaScript东西，则该元素不应为<a>标记。

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

所以，有一个好处来使用<a href="#">。这样做时，默认情况下会在该元素上获得光标指针a href="#"。为此，我认为您可以为此使用CSS，cursor:pointer;也可以解决此问题。

最后，如果您要从JavaScript代码本身绑定事件，那么event.preventDefault()如果您使用<a>标签，就可以做到这一点，但是如果您不<a>为此使用标签，那么您就可以获得优势，但是不需要这样做。

因此，如果您看到了，最好不要对此类内容使用标签。

不要仅出于运行JavaScript的目的而使用链接。

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

而是使用链接以外的其他元素：

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

并使用CSS设置样式：

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

最好使用jQuery，

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

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

锚标记标记将类似于

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

很简单！

如果碰巧正在使用AngularJS，则可以使用以下代码：

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

不会做什么。

此外

• 与（＃）一样，它不会带您到页面顶部。
  • 因此，您无需false使用JavaScript 显式返回
• 简而言之

如果没有，href可能没有理由使用锚标签。

您几乎可以在每个元素上附加事件（单击，悬停等），那么为什么不只使用a span或div？呢？

对于禁用了JavaScript的用户：如果没有后备广告（例如，Alternative href），那么他们至少应该根本无法看到该元素并与之交互，无论它是<a>还是<span>标签。

通常，您应该始终具有一个后备链接，以确保禁用JavaScript的客户端仍然具有某些功能。这个概念称为不干扰JavaScript。

示例...假设您具有以下搜索链接：

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

您始终可以执行以下操作：

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

这样，search.php当使用JavaScript的查看器查看您的增强功能时，就会将禁用JavaScript的人员定向到。

我个人将它们组合使用。例如：

的HTML

<a href="#">Link</a>

一点点的jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

要么

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

但是我使用它只是为了防止用户单击空锚点时页面跳到顶部。我很少on在HTML中直接使用onClick和其他事件。

我的建议是使用<span>带有class属性的element 而不是锚。例如：

<span class="link">Link</span>

然后，.link使用包裹在主体中，</body>标签之前或外部JavaScript文档中的脚本将函数分配给。

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

*注意：对于动态创建的元素，请使用：

$('.link').on('click', function() {
    // do something
});

对于使用动态创建的元素创建的动态创建的元素，请使用：

$(document).on('click','.link', function() {
    // do something
});

然后，您可以将span元素设置为样式，使其看起来像是带有一点CSS的锚点：

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

这是上面提到的jsFiddle示例。

根据您要完成的工作，您可能会忘记onclick而仅使用href：

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

它绕过了返回false的需要。我不喜欢该#选项，因为如上所述，它将带用户到页面顶部。如果您在其他地方未启用JavaScript来发送用户（这在我工作的地方很少见，但这是一个很好的主意），那么Steve提出的方法非常有用。

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

最后，javascript:void(0)如果您不希望任何人去任何地方并且不想调用JavaScript函数，则可以使用。如果您有想要发生鼠标悬停事件的图像，则效果很好，但是用户没有任何可单击的东西。

当我有几个人造链接时，我更喜欢给他们一类“无链接”。

然后在jQuery中，添加以下代码：

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

对于HTML，链接很简单

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

我不喜欢使用哈希标签，除非将它们用于锚点，并且只有在我拥有两个以上的虚假链接时才执行上述操作，否则我将使用javascript：void（0）。

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

通常，我只想完全避免使用链接，而只是在跨度中包裹一些内容，并将其用作激活某些JavaScript代码的方式，例如弹出窗口或内容展示。

我相信您提出的是错误的二分法。这些不是仅有的两个选择。

我同意D4V360先生的意见，他建议，即使您使用的是定位标记，您在这里也没有真正的定位标记。您所拥有的只是文档的特殊部分，其行为应略有不同。一个<span>标签是更为合适。

我用开发人员工具在谷歌浏览器中尝试了两次，id="#"花了0.32秒。而该javascript:void(0)方法仅花费了0.18秒。因此，在谷歌浏览器中，javascript:void(0)效果更好，更快。

我基本上是从这篇使用渐进增强的实用文章来解释的。简短的答案是您从不使用，javascript:void(0);或者#除非您的用户界面已经推断启用了JavaScript，否则应使用javascript:void(0);。另外，请勿将span用作链接，因为一开始它在语义上是错误的。

在您的应用程序中使用SEO友好的URL路由（例如/ Home / Action / Parameters）也是一种好习惯。如果您有一个指向页面的链接，该页面首先在没有JavaScript的情况下工作，则可以在以后增强体验。使用指向工作页面的真实链接，然后添加一个onlick事件以增强演示效果。

这是一个样本。Home / ChangePicture是指向页面上具有用户界面和标准HTML提交按钮的表单的有效链接，但将其插入带有jQueryUI按钮的模式对话框中看起来更好。两种方法都可以满足移动优先开发的要求，具体取决于浏览器。

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