提问



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




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

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



我用javascript:void(0)


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


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


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


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


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


onclick="someFunc.call(this)"


要么


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


使用javascript:void(0)避免了上述所有问题,我没有发现任何下行的例子。


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


使用href="#",确保onclick总是包含return false;,任何被调用的函数都不会抛出错误,如果你动态地将函数附加到onclick属性make确保它不会抛出错误而返回false


要么


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


第二个显然更容易沟通。

最佳参考


都不是。


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


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


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


查看不引人注目的JavaScript 和渐进式增强(两者都是维基百科)。[123] [124]

其它参考1


<a href="#" onclick="myJsFunc();">Link</a><a href="javascript:void(0)" onclick="myJsFunc();">Link</a>或其他任何包含onclick属性的东西 - 五年前还可以,但现在它可能是一个不好的做法。这就是为什么:



  1. 它促进了突兀的JavaScript的实践 - 这已经证明难以维护并且难以扩展。更多关于 Unobtrusive JavaScript 的内容。[125]

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

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



不引人注目的JavaScript方式



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


简单代码示例





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



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


javascript:;的行为也像javascript:void(0);

其它参考2


老实说我也不建议。我会使用程式化的<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>



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

其它参考3


理想情况下,你这样做:


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


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

其它参考4


如果你问我我也不会;


如果您的链接的唯一目的是运行一些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>



仅使用#会产生一些有趣的动作,所以如果你想节省JavaScript bla, bla,的打字工作,我建议使用#self

其它参考5


我使用以下内容


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


代替


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

其它参考6


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

其它参考7


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

其它参考8


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

其它参考9


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


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

其它参考10


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



  1. 污染历史

  2. 实例化引擎的新副本

  3. 在全球范围内运行,并不尊重事件系统。



当然,使用onclick处理程序防止默认操作的#更好。此外,唯一目的是运行JavaScript的链接并不是真正的链接,除非您在发生错误时将用户发送到页面上的某个合理的锚点(只有#将发送到顶部)。您可以简单地模拟与样式表链接的外观和感觉,并完全忘记href。


另外,关于cowgod的建议,尤其是:...href="javascript_required.html" onclick="...这是一种很好的方法,但它并没有区分禁用JavaScript和onclick失败场景。

其它参考11


我经常去


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


它比javascript:void(0)短并且做同样的事情。

其它参考12


我会用:


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


理由:



  1. 这使得href简单,搜索引擎需要它。如果您使用其他任何内容(例如字符串),则可能会导致404 not found错误。

  2. 当鼠标悬停在链接上时,它不会显示它是一个脚本。

  3. 使用return false;,页面不会跳到顶部或打破back按钮。


其它参考13


使用jQuery会更好,


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


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


锚标记标记就像


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


很简单!

其它参考14


所以,当你使用<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代码本身绑定事件,那么如果您使用<a>标签,则可以event.preventDefault()实现此目的,但如果您不使用<a>]]为此标记,你有优势,你不需要这样做。


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

其它参考15


我选择使用javascript:void(0),因为使用此功能可能会阻止右键单击打开内容菜单。

其它参考16


如果您恰好使用 AngularJS ,则可以使用以下内容:[129]


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


哪个不会做任何事情。


此外



  • 它不会带你到页面的顶部,就像(#)一样


    • 因此,您不需要使用JavaScript明确返回false


  • 简洁简洁


其它参考17


不要仅使用链接来运行JavaScript。


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


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


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


并使用CSS设置样式:


.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

其它参考18


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


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


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

其它参考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的观看者会查看您的增强功能。

其它参考20


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

其它参考21


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


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


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


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


最后,你可以使用javascript:void(0),如果你不想让任何人去任何地方,如果你不想调用一个JavaScript函数。如果你有一个想要发生鼠标悬停事件的图像,它会很好用,但是用户没有任何东西可以点击。

其它参考22


当我有几个虚假链接时,我更喜欢给他们一类无链接。


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


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


对于HTML,链接很简单


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


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


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


通常情况下,我喜欢完全避免使用链接,只是在一个范围内包装一些内容,并将其用作激活某些JavaScript代码的方式,如弹出窗口或内容显示。

其它参考23


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


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

其它参考24


我基本上使用渐进增强来解释这篇实用文章。简短的回答是你永远不会使用javascript:void(0);#,除非你的用户界面已经推断出启用了JavaScript,在这种情况下你应该使用javascript:void(0); 。另外,不要使用span作为链接,因为这在语义上是错误的。[130]


在您的应用程序中使用SEO友好的URL路由,例如/Home/Action/Parameters也是一种很好的做法。如果您有一个指向不使用JavaScript的页面的链接,那么您可以在以后增强体验。使用指向工作页面的真实链接,然后添加onlick事件以增强演示。[131]


这是一个样本。 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>

其它参考25


我说最好的方法是将一个href锚点转换为你永远不会使用的ID,例如#Do1Not2Use3This4Id5或类似的ID,你100%肯定没有人会使用并且不会冒犯别人。



  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将删除阻止浏览器选择文本的东西)



基本上没有人在本文中提到过我认为很重要的5,因为如果你的网站突然开始选择链接周围的东西,你的网站就会变得不专业。[132]