以下是构建具有运行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;
}
但他们忘了在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)"
第二个是显然更容易沟通。
我用下面的
<a href="javascript:;" onclick="myJsFunc();">Link</a>
代替
<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>
我建议在其他地方,说明你应该href
属性使用常规的URL同意,然后调用一些JavaScript函数中的onclick。该缺陷是,他们的呼叫后automaticaly添加return false
。
这种方法的问题是,如果功能将无法正常工作或是否会有任何问题,链接将变得无法点击。 onclick事件将始终返回false
,所以正常的网址不会被调用。
有非常简单的解决方案。让函数返回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 ...当它与规范。和预算)。此外,它被认为是不好的形式使用JavaScript的HTML属性直接和协议。
我建议使用<button>
元件代替,特别是如果控制是应该产生在数据的变化。 (像一个POST)。
它甚至更好,如果你悄悄地注入的元素,一种渐进增强。 (见this comment。)
除非你写出使用JavaScript的链接(让你知道它在浏览器中启用),你最好应提供适当的链接,谁与禁用JavaScript浏览,然后阻止链接的默认动作在你的onclick人事件处理程序。这样,那些启用JavaScript将运行功能和那些禁用JavaScript将跳转至相应页面(或位置在同一页内),而不仅仅是点击链接并没有什么发生。
当然哈希(#
)更好,因为在JavaScript中它是一个pseudoscheme:
当然,“#”与onclick处理防止默认操作是[多]更好。此外,具有唯一目的运行JavaScript的链接是不是真正的“链接”,除非你正在发送用户的页面上的一些明智的锚(只是#将发送到顶部)时出现错误。你可以简单地模拟外观和感觉与样式表的链接的,忘了HREF的。
此外,关于cowgod的建议,特别是这样的:...href="javascript_required.html" onclick="...
这是很好的方法,但它并没有“禁用JavaScript”和“点击失败”的情况加以区分。
我通常去
<a href="javascript:;" onclick="yourFunction()">Link description</a>
这是比短的javascript:无效(0),并做了同样的。
我会用:
<a href="#" onclick="myJsFunc();return false;">Link</a>
原因:
href
简单,搜索引擎需要它。如果你使用别的(如字符串),它可能会导致404 not found
错误。return false;
,页面不会跳转到顶部或打破back
按钮。我选择使用javascript:void(0)
,因为使用这种可预防右击打开内容菜单。但是javascript:;
较短,做同样的事情。
所以,当你正在做一些JavaScript的事情与<a />
标签,如果你把href="#"
还有,你可以添加在活动结束返回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,跨度或任何适合有根据自己的需要任何其他元素,因为你被允许添加上的所有元素的事件。
因此,有使用<a href="#">
一个好处。您在默认情况下该元素上得到光标指针,当你做a href="#"
。对于这一点,我认为你可以使用CSS这也解决了这个问题,这就像cursor:pointer;
。
而在最后,如果你是从JavaScript代码本身结合的情况下,也可以做event.preventDefault()
实现这一点,如果你正在使用<a>
标签,但如果你没有使用<a>
标签为此,有你的优势,你不需要这么做。
所以,如果你看到的,它最好不要使用标签的这种东西。
都不是。
如果你能有一个实际的URL有意义用其作为HREF。的onclick将不火,如果你的链接的人中间,点击打开一个新标签,或者如果他们已经禁用了JavaScript。
如果这是不可能的,那么你至少应该注入锚标记与JavaScript和相应的Click事件处理程序的文档。
我知道这并不总是可能的,但在我看来,应该在开发任何公共网站来争取的。
退房Unobtrusive JavaScript和Progressive enhancement(均为维基百科)。
不要使用链接,运行的JavaScript的唯一目的。
使用的HREF =“#”滚动页面顶端;使用无效(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客户仍然有一些功能。这个概念被称为显眼的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观众查看您的增强功能。
如果没有href
也许没有理由使用一个锚标记。
你可以几乎每一个元素上附加的事件(点击,悬停等),那么,为什么不直接使用span
or一个div
?
并与JavaScript的用户禁用:如果没有回退(例如,替代href
),他们至少应该不能够看到并与该元素在所有的,不管它是一个<a>
或<span>
标签交互。
根据您想要完成的任务,你可以忘记的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函数做。如果你有你想要一个鼠标悬停事件与发生图像它的伟大工程,但有没有什么用户点击。
当我有几个人造环节,我更愿意给他们一个类的无连接“的。
然后jQuery中,我添加以下代码:
$(function(){
$('.no-link').click(function(e){
e.preventDefault();
});
});
而对于HTML,链接简直是
<a href="/" class="no-link">Faux-Link</a>
我不喜欢使用哈希标签,除非他们用于锚,我只是做了以上的时候我有两个以上的假链接,否则我去使用javascript:无效(0)。
<a href="javascript:void(0)" class="no-link">Faux-Link</a>
通常情况下,我想只是避免使用在所有的链接,只是换东西跨度围绕和使用,作为一种积极的一些JavaScript代码,就像一个弹出或内容显示。
我相信你提出一个错误的二分法。这些都不是只有两个选择。
我同意D4V360先生谁建议,即使您正在使用的锚标记,你没有真正有锚这里。所有你是应该的行为略有不同文档的特殊部分。一个<span>
标签是远远更为合适。
我无论是在谷歌浏览器与开发工具试图和id="#"
了0.32秒。虽然javascript:void(0)
方法了仅为0.18秒。因此,在谷歌Chrome,javascript:void(0)
工作更好更快发展。
我结合个人使用。例如:
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
标签之前或外部JavaScript文档中的脚本</body>
功能。
<script>
(function($) {
$('.link').click(function() {
// do something
});
})(jQuery);
</script>
*注:对于动态创建的元素,使用:
$('.link').on('click', function() {
// do something
});
而对于其与动态创建的元素创建动态创建的元素,使用方法:
$(document).on('click','.link', function() {
// do something
});
然后,你可以风格跨度元素看起来像一个小CSS锚:
.link {
color: #0000ee;
text-decoration: underline;
cursor: pointer;
}
.link:active {
color: red;
}
下面是上面上述a jsFiddle例子。
这样做<a href="#" onclick="myJsFunc();">Link</a>
或<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>
或任何其他包含一个onclick
属性 - 还行回到五年前,虽然现在它可以是一个不好的做法。这是因为:
只是没有href
属性了!任何好的CSS复位会照顾缺少的默认光标样式的,所以这是一个非问题。这是因为你的JavaScript逻辑停留在JavaScript中,而不是在你的标记更容易维护 - - 当你开始开发需要你的逻辑被分成大型JavaScript应用程序是必不可少的,然后使用正常和不显眼的最佳实践附上您的JavaScript功能blackboxed组件和模板。更多关于这方面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>
为可扩展的,blackboxed,Backbone.js的组分的例子 - see this working jsfiddle example here。注意我们是如何利用非侵入式JavaScript的做法,并在代码少量具有可跨页面多次重复没有不同的组件实例之间的副作用或冲突的组件。惊人!
href
元素的a
属性将导致元件使用tab
键导航无法访问。如果您希望这些元素通过tab
键来访问,你可以设置tabindex
属性,或使用button
元素来代替。您可以轻松风格的按钮元素,看起来像在Tracker1's answer提到的正常环节。href
元素的a
属性将导致Internet Explorer 6和Internet Explorer 7不采取对a:hover
造型,这就是为什么我们增加了一个简单的JavaScript垫片通过a.hover
做到这一点,而不是。这是完全没关系,如果你没有一个href属性并没有优雅降级那么你的链接无论如何都不会工作 - ,你就会有更大的问题担心。a
元素与去将通过Ajax请求,无需手动执行操作或任何应走的路有些网址href
属性。如果你这样做,那么你要确保你对你的点击呼叫做一个event.preventDefault()
以确保当按钮被点击它并没有跟随链接。此选项称为优雅降级。我基本上从this practical article using progressive enhancement释义。简短的回答是,你永远不会使用javascript:void(0);
或#
除非你的用户界面已经推断,启用JavaScript,在这种情况下,你应该使用javascript:void(0);
。另外,不要使用跨度环节,因为这是语义错误的开始。
在应用程序中使用SEO友好的URL路径,例如/ home /动作/参数是一个很好的做法也是如此。如果你有一个链接,没有JavaScript第一个工作页面,你也可以在以后提高经验。使用真正链接到一个工作页面,然后添加一个点击数事件,以增强演示。
这里是一个样本。首页/ 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>
'#'
将采取用户返回到页面的顶部,所以我通常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。我也建议通过脚本,结合不使用元素标签的onclick
属性。唯一的疑难杂症是不能被停用旧的IE中的伪3D文字效果。
如果你必须使用一个元素,使用javascript:void(0);
对于已经提到的原因。
注意:您可以替换字符串的0
如javascript:void('Delete record 123')
它可以作为一个额外的指标,将显示哪些点击会怎么做。
第一个,最好是使用真正的链接,按照情况下,用户已禁用JavaScript。只要确保返回false,以防止click事件从发射如果JavaScript的执行。
<a href="#" onclick="myJsFunc(); return false;">Link</a>
如果你使用Angular2,这样的工作:
<a [routerLink]="" (click)="passTheSalt()">Click me</a>
。
无论如果你问我;
如果你的“链接”有一些运行JavaScript代码它没有资格作为一个链接的唯一目的;而一段文字具有耦合到其上的JavaScript函数。我会建议使用<span>
标签与连接到它的onclick handler
和一些基本的CSS来immitate的链接。链接是用于导航做,如果你的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是不存在/使用你不这样做你会悄悄地通过JavaScript添加的onclick事件的元素有没用的事件处理程序转瓶代码和潜在的混淆(或至少分心)的实际内容。
只需使用#
做一些有趣的动作,所以我会建议使用#self
如果你想节省打字JavaScript bla, bla,
的努力。