我应该将哪个“href”值用于JavaScript链接,“#”或“javascript:void(0)”?

时间:2008-09-25 17:54:27

标签: javascript html performance optimization href

以下是构建链接的两种方法,其唯一目的是运行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>

56 个答案:

答案 0 :(得分:2095)

我使用javascript:void(0)

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

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

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

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

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

onclick="someFunc.call(this)"

OR

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

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

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

使用href="#",确保onclick始终包含return false;,任何被调用的函数都不会引发错误,并且如果您将函数动态附加到onclick } property确保它不会抛出错误而返回false

OR

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

第二个显然更容易沟通。

答案 1 :(得分:1254)

都不是。

如果您有一个有意义的实际网址,请将其用作HREF。如果有人中间点击您的链接以打开新标签或者他们禁用了JavaScript,那么onclick就不会触发。

如果无法做到这一点,那么您至少应该使用JavaScript和相应的单击事件处理程序将锚标记注入到文档中。

我意识到这并非总是可行,但在我看来,应该努力开发任何公共网站。

查看 Unobtrusive JavaScript Progressive enhancement (均为维基百科)。

答案 2 :(得分:758)

执行<a href="#" onclick="myJsFunc();">Link</a><a href="javascript:void(0)" onclick="myJsFunc();">Link</a>或其他包含onclick属性的内容 - 五年前还可以,但现在这可能是一个不好的做法。原因如下:

  1. 它促进了突兀JavaScript的实践 - 结果证明难以维护且难以扩展。有关详情,请参阅 Unobtrusive JavaScript

  2. 您花费时间编写令人难以置信的过于冗长的代码 - 这对您的代码库几乎没有任何好处(如果有的话)。

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

  4. 不引人注目的JavaScript方式

    根本就没有href属性!任何好的CSS重置都会处理缺少的默认光标样式,因此这不是问题。然后使用优雅且不显眼的最佳实践附加您的JavaScript功能 - 当您的JavaScript逻辑保留在JavaScript而不是标记中时,这些实践更易于维护 - 这在您开始开发需要将逻辑拆分为大型JavaScript应用程序时非常重要黑盒子组件和模板。有关详情,请参阅 Large-scale JavaScript Application Architecture

    简单代码示例

    // 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组件示例 - see this working jsfiddle example here 。请注意我们如何利用不引人注目的JavaScript实践,并且在少量代码中有一个组件可以在页面上重复多次,而不会在不同的组件实例之间产生副作用或冲突。惊人!

    备注

    • 省略href元素上的a属性将导致无法使用tab键导航访问该元素。如果您希望通过tab键访问这些元素,则可以设置tabindex属性,或使用button元素。您可以轻松地将按钮元素设置为与 Tracker1's answer 中提到的普通链接相似。

    • 省略href元素上的a属性会导致Internet Explorer 6Internet Explorer 7无法采用a:hover样式,这就是为什么我们添加了一个简单的JavaScript填充程序,以通过a.hover来完成此操作。这是完全没问题的,好像你没有href属性并且没有优雅的降级那么你的链接无论如何都无法正常工作 - 你会有更大的问题需要担心。

    • 如果您希望您的操作仍然可以在禁用JavaScript的情况下使用,那么使用带有a属性的href元素转到某个URL,该URL将手动执行操作,而不是通过Ajax请求或任何应该的方式。如果您这样做,那么您希望确保在点击通话中执行event.preventDefault()以确保单击该按钮时它不会跟随该链接。此选项称为优雅降级。

答案 3 :(得分:304)

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

javascript:;的行为也类似于javascript:void(0);

答案 4 :(得分:245)

我诚实地建议不要。我会使用程式化的<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。我还建议通过脚本绑定,而不是使用元素标记上的onclick属性。唯一的问题是旧的IE中的伪文本3d文本效果无法禁用。


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

  • 如果您的onclick事件失败,将始终拦截。
  • 不会发生错误的加载调用,或根据哈希更改触发其他事件
  • 如果点击通过(onclick throws),哈希标记可能会导致意外行为,除非它是适当的直通行为,否则你想要更改导航历史记录。

注意:您可以将0替换为javascript:void('Delete record 123')这样的字符串,该字符串可以作为一个额外的指示符来显示点击实际上会做什么。

答案 5 :(得分:137)

第一个,理想情况下,如果用户禁用了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

答案 6 :(得分:95)

如果你问我,也不要;

如果您的“链接”的唯一目的是运行某些JavaScript代码,则它不符合链接条件;而是一段带有JavaScript功能的文本。我建议使用附加了<span>的{​​{1}}标记和一些基本的CSS来模仿链接。链接用于导航,如果您的JavaScript代码不是导航,则它不应该是onclick handler标记。

示例:

<a>
function callFunction() { console.log("function called"); }
.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}

答案 7 :(得分:95)

理想情况下,你会这样做:

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

或者,更好的是,你在HTML中有默认的动作链接,并且你在DOM渲染后通过JavaScript不加干扰地将onclick事件添加到元素中,从而确保如果JavaScript不存在/利用你不要让无用的事件处理程序摆脱你的代码,并可能使你的实际内容混淆(或至少分散注意力)。

答案 8 :(得分:75)

仅使用#会产生一些有趣的动作,因此如果您希望节省#self的打字工作,我建议您使用JavaScript bla, bla,

答案 9 :(得分:63)

我使用以下

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

代替

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

答案 10 :(得分:53)

我同意其他地方的建议,说明你应该在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

答案 11 :(得分:50)

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

答案 12 :(得分:38)

除非您使用JavaScript写出链接(因此您知道它已在浏览器中启用),否则理想情况下应为正在使用JavaScript进行浏览的用户提供正确的链接,然后阻止链接的默认操作在你的onclick事件处理程序中。这样,启用JavaScript的人将运行该功能,禁用JavaScript的人将跳转到适当的页面(或同一页面内的位置),而不是仅仅点击链接并且没有任何事情发生。

答案 13 :(得分:37)

如果控件应该在数据中产生更改,我建议使用<button>元素,尤其是。 (像POST一样。)

如果你不引人注意地注入元素,这是一种渐进增强效果,那就更好了。 (见this comment。)

答案 14 :(得分:35)

绝对哈希(#)更好,因为在JavaScript中它是伪方案:

  1. 污染历史
  2. 实例化引擎的新副本
  3. 在全局范围内运行,不尊重事件系统。
  4. 当然,使用onclick处理程序防止默认操作的“#”更好。此外,唯一目的是运行JavaScript的链接并不是真正的“链接”,除非您在发生错误时将用户发送到页面上的某个合理的锚点(只是#将发送到顶部)。您可以简单地模拟与样式表链接的外观和感觉,并且完全忘记href。

    此外,关于cowgod的建议,尤其是:...href="javascript_required.html" onclick="...这是一种很好的方法,但它不区分“禁用JavaScript”和“onclick失败”方案。

答案 15 :(得分:30)

我通常会去

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

它比javascript:void(0)更短并且也一样。

答案 16 :(得分:27)

我会用:

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

<强>理由:

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

答案 17 :(得分:25)

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

答案 18 :(得分:23)

因此,当您使用<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>标记。

您只需使用<button />来执行操作或根据您的需要执行任何其他元素,例如b,span或其他适合的元素,因为您可以在所有元素上添加事件。


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

最后,如果您从JavaScript代码本身绑定事件,那么如果您使用event.preventDefault()标记,则可以<a>实现此目的,但如果您不使用<a>为此标记,您可以获得优势,您无需执行此操作。

所以,如果你看到,最好不要在这类东西上使用标签。

答案 19 :(得分:22)

最好使用jQuery,

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

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

锚标记标记就像

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

够简单!

答案 20 :(得分:22)

请勿仅为了运行JavaScript而使用链接。

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

相反,请使用链接以外的元素:

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

使用CSS设置样式:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

答案 21 :(得分:20)

如果您正在使用AngularJS,则可以使用以下内容:

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

哪个什么都不做。

另外

  • 它不会带你到页面的顶部,就像(#)一样
    • 因此,您无需使用JavaScript
    • 显式返回false
  • 简洁简洁

答案 22 :(得分:19)

通常,您应始终使用后备链接以确保禁用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;
    }
};

这样,禁用JavaScript的用户会被定向到search.php,而使用JavaScript的观看者会查看您的增强功能。

答案 23 :(得分:18)

如果没有href,则可能没有理由使用锚标记。

您可以在几乎每个元素上附加事件(点击,悬停等),那么为什么不使用spandiv

对于禁用JavaScript的用户:如果没有后备(例如,替代href),他们至少应该无法查看该元素并与之交互,无论它是什么<a><span>代码。

答案 24 :(得分:16)

当我有几个虚假链接时,我更愿意给他们一类“无链接”。

然后在jQuery中,我添加以下代码:

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

对于HTML,链接只是

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

我不喜欢使用Hash-Tags,除非它们用于锚点,而且我只有当我有两个以上的虚假链接时才会执行上述操作,否则我会使用javascript:void(0)。< / p>

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

通常情况下,我喜欢完全避免使用链接,只是在一个范围内包装一些东西,然后用它来激活一些JavaScript代码,比如弹出窗口或内容显示。

答案 25 :(得分:16)

我相信你提出了错误的二分法。这些不是唯一的两个选择。

我同意D4V360先生的观点,他建议即使您使用锚标签,也不要在这里真正拥有锚。您所拥有的只是文档的特殊部分,其行为应略有不同。 <span>标签更合适。

答案 26 :(得分:16)

根据您想要完成的任务,您可以忘记onclick并使用href:

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

它绕过了返回false的需要。我不喜欢#选项,因为如上所述,它会将用户带到页面顶部。如果你有其他地方发送用户,如果他们没有启用JavaScript(这在我工作的地方很少,但是一个非常好的主意),那么史蒂夫提出的方法效果很好。

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

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

答案 27 :(得分:16)

我使用开发者工具在谷歌浏览器中尝试过,id="#"耗时0.32秒。虽然javascript:void(0)方法只花了0.18秒。因此,在谷歌浏览器中,javascript:void(0)效果更好,速度更快。

答案 28 :(得分:13)

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

HTML

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

一点点jQuery

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

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

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

我的建议是使用<span>元素而不是class属性 锚。例如:

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

以上是 a jsFiddle 上述例子。

答案 29 :(得分:13)

我基本上是从this practical article using progressive enhancement解释的。 简短的回答是,除非您的用户界面已经推断启用了JavaScript,否则您永远不会使用javascript:void(0);#,在这种情况下,您应该使用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>

答案 30 :(得分:11)

你也可以在这样的锚中写一个提示:

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

因此用户将知道此链接的作用。

答案 31 :(得分:11)

我说最好的方法是将一个href锚点发送给你永远不会使用的ID,例如#Do1Not2Use3This4Id5或类似的ID,你100%肯定没有人会使用并且赢了# 39;得罪人。

  1. Javascript:void(0)是一个坏主意,违反了启用CSP的HTTPS页面上的内容安全政策https://developer.mozilla.org/en/docs/Security/CSP(感谢@ jakub.g)
  2. 仅使用#会让用户在按下时跳回到顶部
  3. 如果未启用JavaScript,则无法破坏页面(除非您有JavaScript检测代码
  4. 如果启用了JavaScript,则可以禁用默认事件
  5. 除非您知道如何阻止浏览器选择某些文字,否则您必须使用href(不知道使用4将删除阻止浏览器选择文本的内容)
  6. 基本上没有人在本文中提到5我认为很重要,因为如果您的网站突然开始选择链接周围的内容,那么您的网站就会变得不专业。

答案 32 :(得分:10)

禁用JavaScript的用户可以访问您的站点,这很好,在这种情况下,href指向一个页面,该页面执行与正在执行的JavaScript相同的操作。否则,我使用“”和“return false;”来阻止默认操作(滚动到页面顶部),正如其他人所提到的那样。

Google搜索“javascript:void(0)”提供了有关此主题的大量信息。其中一些,如this one提到了不使用void(0)的原因。

答案 33 :(得分:9)

这里还有一件重要的事情需要记住。符合Section 508。 因此,我觉得有必要指出你需要屏幕阅读器的锚标签,例如JAWS能够通过标签来集中它。因此解决方案“只使用JavaScript并忘记锚定开始”不是其中一些选项。只有当你无法让屏幕跳回到顶部时,才需要在href内部启动JavaScript。您可以将settimeout用于0秒并将JavaScript激发到您需要关注的位置,但即使是apage也会跳到顶部然后再返回。

答案 34 :(得分:9)

我希望为#继续使用href值的人看到很多答案,因此,这是一个有希望满足两个阵营的答案:

A)我很高兴将javascript:void(0)作为我的href值:

<a href="javascript:void(0)" onclick="someFunc.call(this)">Link Text</a>

B)我正在使用jQuery,并希望#作为我的href值:

<a href="#" onclick="someFunc.call(this)">Link Text</a>

<script type="text/javascript">
    /* Stop page jumping when javascript links are clicked.
       Only select links where the href value is a #. */
    $('a[href="#"]').live("click", function(e) {
         return false; // prevent default click action from happening!
         e.preventDefault(); // same thing as above
    });
</script>

注意,如果您知道不会动态创建链接,请改用click函数:

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

答案 35 :(得分:9)

我将href =“#”用于我想要虚拟行为的链接。然后我使用这段代码:

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

这意味着如果href等于散列(* =“#”),它会阻止默认链接行为,因此仍然允许您为其编写功能,并且它不会影响锚点击。

答案 36 :(得分:8)

我从您的话中理解的是,您只想创建一个链接来运行JavaScript代码。

然后你应该考虑有人在他们的浏览器中阻止JavaScript。

因此,如果你真的打算仅使用该链接来运行JavaScript函数,那么你应该动态添加它,这样如果用户没有在浏览器中启用他们的JavaScript并且你正在使用它,就不会看到它链接只是为了触发一个JavaScript函数,在浏览器中禁用JavaScript时使用这样的链接是没有意义的。

因此,当禁用JavaScript时,它们都不好。

如果启用了JavaScript并且您只想使用该链接来调用JavaScript函数,那么

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

比使用

好得多
<a href="#" onclick="myJsFunc();">Link</a>

因为href =“#”会导致页面执行不需要的操作。

此外,<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>优于<a href="#" onclick="myJsFunc();">Link</a>的另一个原因是JavaScript被用作大多数浏览器的默认脚本语言。作为Internet Explorer的示例,使用onclick属性来定义将使用的脚本语言的类型。除非弹出另一种优秀的脚本语言,否则Internet Explorer也将使用JavaScript作为默认语言,但如果使用其他脚本语言javascript:,则可以让Internet Explorer了解正在使用的脚本语言。

考虑到这一点,我更喜欢使用和锻炼

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

足以使其习惯并且更加用户友好,请在JavaScript代码中添加此类链接:

$(document).ready(function(){
    $(".blabla").append('<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>')
});

答案 37 :(得分:8)

您可以使用href并删除所有只有哈希的链接:

HTML:

<a href="#" onclick="run_foo()"> foo </a>

JS:

$(document).ready(function(){         // on DOM ready or some other event

   $('a[href=#]').attr('href','');    // set all reference handles to blank strings
                                      //  for anchors that have only hashes

});

答案 38 :(得分:8)

为什么不使用它?这不会向上滚动页面。

<span role="button" onclick="myJsFunc();">Run JavaScript Code</span>

答案 39 :(得分:7)

在现代网站上,如果元素仅执行JavaScript功能(不是真正的链接),则应避免使用href。

为什么呢? 此元素的存在告诉浏览器这是一个与目标的链接。 这样,浏览器将显示“在新选项卡/窗口中打开”功能(当您使用shift +单击时也会触发)。 这样做会导致打开同一页面而没有触发所需的功能(导致用户受挫)。

关于IE: 从IE8开始,如果设置了doctype,元素样式(包括悬停)将起作用。其他版本的IE不再需要担心了。

只有缺点: 删除HREF会删除tabindex。 要解决这个问题,您可以使用一个样式为链接的按钮或使用JS添加tabindex属性。

答案 40 :(得分:7)

完全同意整体情绪,在需要时使用void(0),并在需要时使用有效的网址。

使用URL rewriting,您可以创建不仅可以执行禁用JavaScript操作的网址,还可以告诉您具体操作的网址。

<a href="./Readable/Text/URL/Pointing/To/Server-Side/Script" id="theLinkId">WhyClickHere</a>

在服务器端,您只需要解析URL和查询字符串并执行您想要的操作。如果您很聪明,则可以允许服务器端脚本以不同方式响应Ajax和标准请求。允许您使用简洁的集中代码来处理页面上的所有链接。

URL rewriting tutorials

赞成

  • 显示在状态栏中
  • 通过JavaScript中的onclick处理程序轻松升级到Ajax
  • 实际上自我评论
  • 保持您的目录不会被一次性HTML文件弄乱

缺点

  • 仍然应该在JavaScript中使用event.preventDefault()
  • 服务器端的路径处理和URL解析相当复杂。

我相信那里有更多的缺点。随意讨论它们。

答案 41 :(得分:7)

不要忽视您的URL可能是必要的事实 - 在遵循引用之前触发onclick,因此有时您需要在离开页面之前处理客户端内容。

答案 42 :(得分:7)

如果您使用的是<a>元素,请使用此选项:

<a href="javascript:myJSFunc();" />myLink</a>

就个人而言,我稍后会使用JavaScript附加一个事件处理程序(使用attachEventaddEventListener或者可能&lt;将您喜爱的JavaScript框架放在此处&gt;)。

答案 43 :(得分:7)

理想情况下,您应该有一个真实的URL作为非JavaScript用户的后备。

如果这没有意义,请使用#作为href属性。我不喜欢使用onclick属性,因为它直接在JavaScript中嵌入JavaScript。更好的想法是使用外部JS文件,然后将事件处理程序添加到该链接。然后,您可以阻止默认事件,以便在用户点击后不会更改URL以附加#

答案 44 :(得分:6)

我非常希望尽可能地将我的JavaScript保留在HTML标记之外。如果我使用<a>作为点击事件处理程序,那么我建议您使用<a class="trigger" href="#">Click me!</a>

$('.trigger').click(function (e) {
    e.preventDefault();
    // Do stuff...
});

非常重要的是要注意许多开发人员认为使用锚标签进行点击事件处理程序并不好。他们希望您使用<span><div>加上一些为其添加cursor: pointer;的CSS。这是一个很多争论的问题。

答案 45 :(得分:6)

如果您使用链接作为只是执行某些JavaScript代码的方式(而不是使用像D4V360那样强调的范围),只需执行以下操作:

<a href="javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>

如果您使用带onclick的链接进行导航,请不要在JavaScript关闭时使用href =“#”作为后备。当用户点击链接时,通常会非常烦人。相反,如果可能,提供onclick处理程序将提供的相同链接。如果您不能这样做,请跳过onclick并在href中使用JavaScript URI。

答案 46 :(得分:6)

只是提到其他人提到的一点。

绑定事件'onload'a或$('document')要好得多.ready {};然后将JavaScript直接放入click事件中。

在JavaScript不可用的情况下,我会使用href到当前URL,也许是锚点到链接的位置。该页面仍可供没有JavaScript的人使用,他们不会注意到任何差异。

正如我手头所说,这里有一些jQuery可能有所帮助:

var [functionName] = function() {
   // do something
};

jQuery("[link id or other selector]").bind("click", [functionName]);

答案 47 :(得分:6)

不应在HTML中使用内联onclick="something();",以免用无意义的代码污染它;必须在Javascript文件(* .js)中设置所有点击绑定。

像这样设置绑定:$('#myAnchor').click(function(){... **return false**;});$('#myAnchor').bind('click', function(){... **return false**;});

然后你有一个干净的HTML文件很容易加载(和seo友好)没有数千href="javascript:void(0);"href="#"

答案 48 :(得分:3)

这是完整性的另一个选项,即使禁用JavaScript也会阻止链接执行任何操作,并且它很简短:)

<a href="#void" onclick="myJsFunc()">Run JavaScript function</a>

如果页面上没有id,则链接将不执行任何操作。

一般来说,我同意Aaron Wagner的回答,JavaScript链接应该用JavaScript代码注入文档。

答案 49 :(得分:3)

Javascript: void(0);无效为空值 [未分配] ,这意味着您的浏览器将NULL单击以 DOM ,和窗口返回false。
'#'不遵循javascript中的DOM或Window。表示锚href中的“#”符号是 LINK 。链接到相同的当前方向。

答案 50 :(得分:2)

于2019年1月编辑

HTML5 中,使用没有href属性的元素是有效。它被视为“占位符超链接”

  

如果a元素没有href属性,则该元素代表一个占位符,用于表示可能已放置链接的位置(如果存在的话),仅由元素的内容组成。

示例:

<a>previous</a>

如果在那之后您想要执行其他操作:

1-如果链接没有指向任何地方,请不要使用<a>元素。使用<span>或其他合适的方法,然后添加CSS :hover来设置其样式。

2-如果您想变得生硬,精确和快速,请使用javascript:void(0)javascript:undefinedjavascript:;

答案 51 :(得分:1)

这里实际上有四种选择

使用 return false; 允许您保留锚点版本,以防您希望在 JavaScript 禁用 的浏览器中安全“回退”或用户不支持它代理(现在用户的 1-5%)。您可以使用锚点“#”符号、空字符串或特殊 URL 来表示 href 如果您的脚本失败。请注意,您必须使用 href 以便屏幕阅读器知道它是一个超链接。 (注意:我不会讨论关于删除 href 属性的争论,因为这一点在这里没有实际意义。锚上没有 href 意味着锚不再是超链接,而只是一个 html 标签上面有一个被捕获的点击事件。)

<a href="" onclick="alert('hello world!');return false;">My Link</a>
<a href="#" onclick="alert('hello world!');return false;">My Link</a>
<a href="MyFallbackURL.html" onclick="alert('hello world!');return false;">My Link</a>

以下是在 javascript:void(0) 属性中使用 href 的当今更流行的设计。如果浏览器不支持脚本,它应该再次返回到它的页面,因为 href 超链接路径返回一个空字符串。如果您不在乎谁支持 JavaScript,请使用此选项。

<a href="javascript:void(0);" onclick="alert('hello world!');">My Link</a>

答案 52 :(得分:0)

您可以在此处使用javascript:void(0)而不是使用#来停止将定位标记重定向到标头部分。

function helloFunction() {
    alert("hello world");
}
<a href="javascript:void(0)" onclick="helloFunction();">Call Hello Function</a>

答案 53 :(得分:0)

javascript:void(0) 将来会弃用,因此您应该使用 #

答案 54 :(得分:-1)

每个人最常用和最简单的方法是 javascript:void(0),您可以使用它代替使用来停止标记重定向到标头部分

<a href="javascript:void(0)" onclick="testFunction();">Click To check Function</a>

function testFunction() {
    alert("hello world");
}

答案 55 :(得分:-2)

4.0之前的Bootstrap模式具有基本上未记录的行为,他们将使用AJAX从href元素加载a,除非它们正好是#。如果您使用的是Bootstrap 3,javascript:void(0); hrefs将导致javascript错误:

AJAX Error: error GET javascript:void(0);

在这些情况下,您需要升级到bootstrap 4或更改href。