我应该将哪个“href”值用于JavaScript链接,“#”或“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;如果被调用函数抛出错误,则final 将不会执行。因此,开发人员还必须记住在被调用函数中适当地处理任何错误。

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

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和相应的单击事件处理程序将锚标记注入到文档中。

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

查看Unmptrusive JavaScriptProgressive增强(两者都是Wikipedia)。


<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重置都会处理缺少的默认光标样式,因此这不是问题。然后使用优雅且不显眼的最佳实践附加您的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的答案中提到的普通链接。
  • 省略元素href上的属性a将导致Internet Explorer 6Internet Explorer 7不采用a:hover样式,这就是为什么我们添加了一个简单的JavaScript填充程序来实现此目的a.hover。这是完全没问题的,好像你没有href属性并且没有优雅的降级那么你的链接无论如何都不会起作用 – 你会担心更大的问题。
  • 如果您希望您的操作仍然可以禁用JavaScript,那么使用a具有href属性的元素将转到某个URL,该URL将手动执行操作,而不是通过Ajax请求或任何应该去的方式。如果您这样做,那么您希望确保event.preventDefault()在点击通话中执行此操作以确保单击该按钮时它不会跟随该链接。此选项称为优雅降级。

添加评论

友情链接:蝴蝶教程