javascript - JavaScript链接的href属性 "#"或者"javascript:void(0)"?

  显示原文与译文双语对照的内容
0 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>
时间: 原作者:

0 0

我使用 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 属性,并确保不会抛出错误,它返回 false

或者

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

第二个显然更易于沟通。

原作者:
0 0

两者都。

如果你能有一个真正的URL,使用它作为 HREF 。 如果有人在你的链接上打开了一个新的标签,或者他们已经禁用了 JavaScript,那么onclick不会激发。

如果这是不可能的,那么你至少应该使用JavaScript和适当的click事件处理程序在文档中插入标记标记。

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

看看 低调的javascript渐进增强 ( 两个维基百科) 。

原作者:
0 0

正在进行 <a href="#" onclick="myJsFunc();">Link</a> 或者 <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> 或者其他包含 onclick 属性的东西在五年前就可以了,尽管现在它是一个不好的实践。 原因如下:

  1. 它促进了高调的JavaScript的实践,它原来是难以维护和难以扩展的。 更多关于这一点的低调 JavaScript

  2. 你花费了你的时间编写难以置信过于冗长的代码- 它对你的代码库有很少的( 如果有的话) 好处。

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

低调的JavaScript方式

根本没有 href 属性 ! 任何好的CSS重置都会处理丢失的默认光标样式,所以这是一个 non-issue 。 然后附上你的javascript功能使用优雅和低调的最佳实践——也更易于维护你的javascript逻辑保持在javascript中,而不是在你的标记——这是至关重要的,当你开始开发大规模的javascript应用程序,需要你的逻辑分成blackboxed组件和模板。 更多关于 大型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>

一个 blackboxed Backbone.js 示例

对于一个可以伸缩的blackboxed,backbone.js 组件示例- 参见这里工作jsfiddle示例 。 低调注意我们使用javascript的实践和极少量的代码中有一个组件,它可以跨页面重复多次没有副作用或不同的组件实例之间的冲突。 令人称奇 !

便笺

  • 省略 ahref 属性元素会导致元素不可以使用 tab 键导航。 如果希望通过 tab 键访问这些元素,可以设置 tabindex 属性,或者使用 button 元素。 你可以轻松的风格按钮元素看起来像正常链接所 回答 tracker1

  • 省略 a 元素上的href 属性将导致 IE 6IE 7不接受 a:hover 样式,这就是为什么我们添加一个简单的JavaScript shim 来通过 a.hover 完成这个操作。 这是非常好的,如果你没有一个href属性,没有优雅降级,那么你的链接不工作,你将有更大的问题担心。

  • 如果你想让你的行动仍然使用禁用javascript,然后使用一个 a 元素 href 属性,去一些url,将手动执行的操作,而不是通过一个ajax请求之类的应该是路要走。 如果你这样做,那么你要确保你做一个 event.preventDefault() 单击时调用,以确保单击按钮时它不遵循的联系。 这个选项被称为优雅降级。

原作者:
0 0

第一个,理想情况下,如果用户禁用了 JavaScript,就会有一个真正的链接。 只要确保 return false 在JavaScript执行时阻止点击事件。


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

原作者:
0 0

我建议既不建议。 我将使用一个样式化的<button></button> 来实现这种行为。


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

这样你就可以分配你的onclick 。 我还建议通过脚本绑定,而不是使用元素标记上的onclick 属性。 唯一的问题是在旧的IEs中无法禁用的psuedo 3文本效果。


如果你必须使用一个元素,使用 javascript:void(0); 原因已经提到。

  • 将总是拦截以防你的onclick事件失败。
  • 不会发生错误加载调用,或者基于哈希更改触发其他事件
  • 如果单击( onclick抛出),则哈希标记会导致意外行为,除非它是适当的fall-through行为,否则会避免它,并且你希望更改导航历史记录。

注意:你可以用字符串替换 0,例如 javascript:void('Delete record 123') 它可以作为额外的指示器,显示点击的实际效果。

原作者:
0 0

理想情况下你会这样做:


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

或者,更好的做法是在HTML中使用默认动作链接,并在DOM呈现后将onclick事件添加到元素中,这样就可以确保JavaScript不会有任何无用的事件处理程序。

原作者:
0 0

如果你不问我的话

如果你"链接"运行一些javascript代码的唯一目的,不符合一个链接;而与javascript函数耦合的一段文字。 我建议使用 <跨度> 标签附加一个onclick处理程序和一些基本的cssimmitate链接。 用于导航的链接,如果你的JavaScript代码不是导航,则不应该是 <> 标记。

例如:


<style type="text/css">
. jsAction {
 cursor: pointer;
 color: #00f;
 text-decoration: underline;
 }
</style>

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

原作者:
0 0

我使用以下命令


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

改为改为


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

原作者:
0 0

我同意建议其他地方说明你应该使用普通url href 属性,然后在onclick调用一些javascript函数。 缺点是他们在调用后自动添加了 return false

这种方法的问题是,如果函数将不工作或有任何问题,将成为unclickable的链接。 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

原作者:
...