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


4074

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


202
除非我缺少任何东西,否则<a href="javascript:void(0)" onclick="myJsFunc();">绝对没有任何意义。如果必须使用javascript:伪协议,则也不需要该onclick属性。<a href="javascript:myJsFunc();">会很好的。
Wesley Murch 2013年

65
@WesleyMurch-如果myJsFunc()有返回值,则页面将中断。 jsfiddle.net/jAd9G 您仍然必须void像这样使用:<a href="javascript:void myJsFunc();">。但是随后,行为仍然会有所不同。通过上下文菜单调用链接不会触发click事件。
gilly3

38
为什么不只是<a href="javascript:;" onclick="myEvent()"呢?
3k-

26
javascript:;javascript:void(0)
Mike Causer 2013年

78
在查看此内容时首先想到的是:“ <a>如果要执行的操作不是通过本机浏览器功能不打开另一个页面而是要触发一些javascript'动作',为什么要使用span标签?只需使用带有的类的标签js-trigger可能会好得多”。还是我错过了什么?
阿德里安

Answers:


2162

我用javascript:void(0)

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

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

但是后来他们忘记return doSomething()在onclick中使用,而只使用doSomething()

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

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

onclick="someFunc.call(this)"

要么

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

使用javascript:void(0)可以避免上述所有麻烦,而且我还没有发现任何不利方面的例子。

因此,如果您是一个孤独的开发人员,那么您可以清楚地做出自己的选择,但是如果您是团队合作,则必须声明以下两种情况:

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

要么

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

第二种显然更容易沟通。


329
我总是在新标签页中打开每个链接,这就是为什么当人们使用该href="javascript:void(0)"方法时我讨厌它的原因
Timo Huovinen

182
对不起,不同意这个答案为什么有这么多投票?任何对的使用javascript:都应被视为不良做法,过于夸张,并且不能优雅地降级。
Lankymart

52
接下来的两个答案比这个答案更好,更合理。前两个参数也是无效的,因为event.preventDefault()它确实可以防止默认行为(例如,在这种情况下跳转到页面顶部),并且在没有所有return false;疯狂的情况下可以做得更好。
sudee

136
快进至2013年:javascript:void(0)违反了启用CSP的HTTPS页面上的内容安全策略。然后,可以在处理程序中使用href='#'event.preventDefault(),这是一个选择,但我不太喜欢。也许您可以建立使用约定,href='#void'并确保页面上没有任何元素id="void"。这样,单击指向不存在的锚点的链接将不会滚动页面。
jakub.g 2013年

24
您可以使用“#”,然后将click事件绑定到所有以“#”为链接的链接href。这将在jQuery中完成:$('a[href="#"]').click(function(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; });
Nathan

1324

都不行

如果您可以使用一个有意义的实际URL,则可以将其用作HREF。如果有人在您的链接上单击鼠标中键以打开新标签,或者禁用了JavaScript,则onclick不会触发。

如果不可能,那么至少应使用JavaScript和适当的click事件处理程序将锚标记注入文档中。

我意识到这并非总是可能的,但我认为在开发任何公共网站时都应努力做到这一点。

查看Unobtrusive JavaScriptProgressive增强功能(均为Wikipedia)。


19
您能否举例说明如何“使用JavaScript和适当的click事件处理程序将锚标记注入文档中”?
user456584 2013年

11
如果仅用于锚元素,则为什么要完全注入锚标签?a)单击b)显示“指针”光标。在这种情况下,甚至注入锚标记似乎都没有关系。
暗恋

12
两者都不为+1,但是有很多方法。事实仍然是使用其中之一,javascript:或者#都是不好的做法,因此不宜鼓励。好文章顺便说一句。
Lankymart

13
@crush:我也不会使用div或span;坦白说,这似乎<button>是为了实现。但是同意:<a>如果没有合适的链接位置,它可能不应该专门存在。
cHao 2014年

14
@cHao Button也许是最佳选择。我想要指出的是,不应基于默认的外观来选择HTML元素,而应根据其对文档结构的重要性进行选择。
粉碎

774

五年前,做某事<a href="#" onclick="myJsFunc();">Link</a><a href="javascript:void(0)" onclick="myJsFunc();">Link</a>其他任何包含onclick属性的事都可以,尽管现在这可能是个坏习惯。原因如下:

  1. 它促进了侵入性JavaScript的实践-事实证明,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的answer中提到的普通链接。

  • 省略元素href上的属性a将导致Internet Explorer 6Internet Explorer 7不采用a:hover样式,这就是为什么我们添加了一个简单的JavaScript填充程序来a.hover代替的原因。完全可以,就像您没有href属性且没有正常降级一样,您的链接也将无法正常工作-而且您会担心更大的问题。

  • 如果您希望您的操作在禁用JavaScript的情况下仍能正常工作,请使用具有某些URL属性的a元素,该href属性将通过手动而不是通过Ajax请求或其他方式执行操作的URL来执行。如果您正在执行此操作,那么您要确保event.preventDefault()对click调用执行一次操作,以确保单击按钮时它不会跟随链接。此选项称为正常降级。


163
请注意,禁用href属性与跨浏览器不兼容,您将在Internet Explorer中失去悬停效果之类的东西
Thomas Davis

16
当心:button此处建议的链接样式方法受到IE9及更低版本中不可避免的“ 3d”活动状态的困扰。
布伦南·罗伯茨

44
我认为这个答案过于教条。有时候,您只想将JS行为应用于1或2个href。在这种情况下,定义额外的CSS并注入整个JS函数是过大的选择。在某些情况下(例如,通过CMS添加内容),实际上不允许您注入新的CSS或独立的JS,而内联是您所能做的。我看不到实际上对于1或2个简单JS a href而言,内联解决方案的可维护性如何。总是怀疑关于不良做法的广泛的一般性陈述,包括以下内容:)
Jordan Rieger

17
对于所有这些难以解决的“注释”(设置tabindex会在复杂的页面上带来麻烦!)。做更好javascript:void(0)。这是务实的答案,也是现实世界中唯一明智的答案。
Abhi Beckert

14
如果您关心(并且应该)使Web应用程序可访问,那么简单明了就建议您使用href。疯狂在于tabindex的方向。
jkade 2013年

328

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

javascript:; 也表现得像 javascript:void(0);


68
避免这种情况的方法是在onclick事件处理程序中返回false。
Guvante

34
在事件处理程序中返回false不能避免如果JavaScript不能成功运行JS。
昆汀

28
使用“ #someNonExistantAnchorName”效果很好,因为它无处可跳。
scunliffe

21
如果您有基本href,则##something会将您带到基本href页面(而不是当前页面)上的锚点。
Abhi Beckert 2012年

11
shebang(#!)可以解决问题,但这绝对不是一个好习惯。
Neel

276

老实说,我都不建议。我将使用一种程式化<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。我还建议通过脚本进行绑定,而不要使用onclickelement标签上的属性。唯一的难题是无法禁用的较旧IE中的伪3d文本效果。


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

  • 万一您的onclick事件失败,它将始终拦截。
  • 不会发生错误的加载调用,也不会基于哈希更改触发其他事件
  • 如果单击失败(onclick抛出),则hash标签可能会导致意外行为,请避免使用它,除非它是适当的失败行为,并且您想更改导航历史记录。

注意:您可以将替换为0一个字符串,例如,javascript:void('Delete record 123')它可以作为一个额外的指示符,显示点击实际执行的操作。


在IE8 / IE9中,我无法在按钮的:active状态下删除1px的“ 3D”偏移。
布伦南·罗伯茨

@BrennanRoberts是的,不幸的是,IE的任何按钮样式都存在更多问题……我仍然认为这可能是最合适的方法,并不是说我有时不会违反自己的规则。
Tracker1 2012年

那就不要使用<button>,但一个input type=button呢?
Patrik Affentranger 2014年

4
然后使用一个<clickable>元素。或者,<clickabletim>如果您愿意。不幸的是,使用非标准标签或普通div可能会使键盘用户难以集中注意力于元素。
joeytwiddle

28
这个答案应该是最重要的。如果您遇到这种困境,实际上您确实需要一个button。幸运的是,IE9正在迅速失去市场份额,并且1px的有效效应不应阻止我们使用语义标记。<a>是一个链接,它的意思是将您发送到某处,以执行我们的操作<button>
mjsarfatti

141

第一个,理想情况下带有真实链接,以防用户禁用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


19
因此,在启用了JavaScript并且支持该功能的用户代理中,运行一个JavaScript函数,是否退回到页面顶部的链接(对于由于某种原因导致JS失败的用户代理)?这很少是明智的回退。
昆汀

21
“最好在用户禁用JavaScript的情况下提供真实的链接”,它应该转到一个有用的页面,而不是#,即使这只是说明该站点需要JS才能正常工作。至于失败,我希望开发人员在部署之前使用适当的浏览器功能检测等。
Zach

我会假设(希望)类似这样的内容仅用于显示弹出窗口或类似的简单内容。在这种情况下,默认值为弹出页面网址。如果这是Web应用程序的一部分,或者禁用JS会完全破坏页面,则此代码还有其他问题……
Brian Moeskau 09年

5
我的Web应用程序设计为正常降级,因此该链接仍将是一个有用的页面。除非您的Web应用是聊天客户端或具有交互性的东西,否则如果您花时间在设计时要考虑到降级的问题,这应该会起作用。
Zach

2
问题是,如果myJsFunc引发错误,则不会为返回false捕获该错误。
Tracker1 2011年

106

你也不要问我。

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


126
这种方法将“链接”限制为仅鼠标操作。可以通过键盘访问锚,并在按下Enter键时触发其“ onclick”事件。
AnthonyWJones

40
在CSS中对颜色进行硬编码会阻止浏览器使用用户可能定义的自定义颜色,这可能是可访问性问题。
Hosam Aly

30
<span>s不能任何事情。<A>锚和<buttons>用于那!
redShadow 2011年

22
使用buttons是比较好的选择,而这里用span的不是。
apnerve

1
我认为跨度比锚标记好。存在锚标记,可将您定向到其必需的href属性。如果您不打算使用href,请不要使用锚点。它不仅将链接限制为鼠标,因为它不是链接。它没有href。它更像一个按钮,但不发布。不打算做任何事情的跨度完全无效。考虑一个悬停时激活的下拉菜单。它可能是span和div的组合,执行按钮的功能来扩大屏幕上的区域。
NibblyPig 2014年

97

理想情况下,您可以这样做:

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

或者,甚至更好的是,您将在HTML中具有默认的动作链接,并且会在DOM呈现后通过JavaScript将onclick事件毫不费力地添加到元素中,从而确保如果不存在/未使用JavaScript,您不会有无用的事件处理程序使您的代码混乱,并可能混淆(或至少分散您的注意力)您的实际内容。


76

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


7
哇,为这个技巧竖起大拇指。永远不知道您可以使用#selffor命名标签,并避免浏览器跳转到页面顶部的烦人行为。谢谢。
alonso.torres 2011年

34
供参考,#self似乎并不特殊。与文档中任何元素的名称或ID不匹配(且不为空白或“顶部”)的任何片段标识符都应具有相同的效果。
cHao

1
我通常只使用一个固定的锚名称,但是我认为我将开始这样做以使我的工作保持一致。
Douglas.Sesar 2014年

11
我建议#void在其他评论中建立惯例,但实际上#self又简短又容易记住。任何事情都比#
jakub.g 2014年

6
但是,如果您单击该链接,将对用户很奇怪,即在URL中看到“ #void”,看起来像是错误或错误,与#self或其他内容相同。
pmiranda '17

68

我用以下

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

代替

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

2
我使用javascript:(无分号),因为它在悬停状态栏中看起来最整齐。
Boann 2012年

4
此代码可能会在较旧的IE中引起严重的意外。在某些时候,它通常会破坏图像的所有动画效果,包括过渡甚至动画gif:groups.google.com/forum
#!topic/comp.lang.javascript/…

您始终可以执行... javascript:void('Do foo')因为void无论如何都将返回undefined,它将为用户提供指示,指示单击将执行的操作。Do foo可以在哪里Delete record X或任何您喜欢的地方。
Tracker1 2014年

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(例如,浏览器不支持该函数中使用的某些内容或发生其他任何错误),则将其取反truepath/to/some/URL调用。


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


1
@Muhd:返回应该click在链接上激活…
Ry-

50

我建议改用<button>元素,尤其是在控件应该在数据中进行更改的情况下。(有点像POST。)

如果您毫不夸张地注入元素(一种渐进增强),那就更好了。(请参阅此评论。)


2
我也认为这是最好的解决方案。如果您具有要执行某项操作的元素,则没有理由将其链接。
mateuscb 2011年

如果您要询问,并且您的href看起来像“ #something”,则可能列出其他一些答案,但是:如果没有href链接到任何明智的链接,则没有href甚至根本没有链接是没有意义的。建议使用按钮,或者使用其他任何元素,但链接感谢链接无处。
kontur 2011年

1
这样做的另一个优点是,Bootstrap .btn使按钮和链接看起来完全相同。
Ciro Santilli冠状病毒审查六四事件法轮功2014年

从用户的角度来看,button也不会在网址中引入#或将ahref 显示为javascript:;。
Coll

39

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


36

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

  1. 污染历史
  2. 实例化引擎的新副本
  3. 在全局范围内运行,并且不尊重事件系统。

当然,带有防止默认操作的onclick处理程序的“#”要好得多。而且,唯一有运行JavaScript的链接并不是真正的“链接”,除非您在出现问题时将用户引导到页面上的某个合理锚点(只是#会发送到顶部)。您可以简单地模拟与样式表链接的外观,而完全不用考虑href。

另外,关于cowgod的建议,尤其是这样:...href="javascript_required.html" onclick="...这是一个好方法,但是不能区分“ JavaScript禁用”和“ onclick失败”两种情况。


1
@BerkerYüceer,为什么要CW?
免费咨询

30

我通常去

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

它比javascript:void(0)短,并且执行相同的操作。


27

我会用:

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

原因:

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

我不同意“ 1”。当您在不允许使用脚本的情况下放置脚本链接时,会导致错误。因此应该在js代码中添加这种链接。这样一来,人们可以在不允许使用脚本的情况下避免那些链接,并且根本看不到任何错误。
BerkerYüceer

25

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


24

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

您可以根据需要简单地使用a <button />代替做事或其他任何元素,例如b,span或任何适合的元素,因为您可以在所有元素上添加事件。


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

最后,如果您要从JavaScript代码本身绑定事件,那么event.preventDefault()如果您使用<a>标签,就可以做到这一点,但是如果您不<a>为此使用标签,那么您就可以获得优势,但是不需要这样做。

因此,如果您看到了,最好不要对此类内容使用标签。


23

不要仅出于运行JavaScript的目的而使用链接。

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

而是使用链接以外的其他元素:

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

并使用CSS设置样式:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

13
使用按钮,而不是跨度。按钮自然会按照焦点顺序排列,因此无需使用鼠标/触控板即可进行访问。–
Quentin

4
添加ton Quentin的评论:按照目前的写作,键盘用户不会到达该span元素,因为它是不可聚焦的元素。这就是为什么您需要一个按钮。
Tsundoku '17

1
您可以通过添加tabindex="0"跨度使其具有焦点。也就是说,使用按钮更好,因为它免费为您提供所需的功能。若要使用跨度对其进行访问,您不仅需要附加一个单击处理程序,还需要一个键盘事件处理程序,该事件查找空格键或Enter键的按下,然后触发普通的单击处理程序。您还希望将第二个CSS选择器更改为,.funcActuator:hover, .funcActuator:focus以便使该元素具有焦点这一事实显而易见。
无用的代码,

22

最好使用jQuery,

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

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

锚标记标记将类似于

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

很简单!


5
这就是我要说的。如果链接具有有意义的后备网址,请使用该网址。否则,只需省略href或使用比<a>更适合语义的内容。如果所有人都赞成包括href的唯一原因就是想将鼠标悬停,那么简单的“ a {cursor:pointer;}”就可以解决问题。
马特·坎托

12
这带来了可怕的可访问性。尝试使用SO:如果不使用鼠标就无法标记帖子。通过制表符可以访问“链接”和“编辑”链接,但不能通过“标志”访问。
尼古拉斯

6
我同意这个选择。如果锚除了JavaScript之外没有其他用途,则不应具有href。@Fatih:使用jQuery意味着如果禁用JavaScript,则链接将没有指针。
Scott Rippey

3
如果您要走这条路,为什么不也使用jQuery绑定点击呢?使用jQuery的一大优点是能够将您的JavaScript与标记分开。
Muhd

4
我不敢相信这个答案有11票。它是可怕的。为什么要通过Javascript(和jQuery ??)添加样式,然后在HTML中定义onclick动作?可怕。
MMM

20

如果碰巧正在使用AngularJS,则可以使用以下代码:

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

不会做什么。

此外

  • 与(#)一样,它不会带您到页面顶部。
    • 因此,您无需false使用JavaScript 显式返回
  • 简而言之

6
但这会导致页面重新加载,并且由于我们一直使用javascript来修改页面,因此这是不可接受的。
胡锦涛

@HenryHu我发现它没有重新加载的原因是因为AngularJS。看到我更新的答案。
whirlwin 2013年

19

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

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

对于禁用了JavaScript的用户:如果没有后备广告(例如,Alternative 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;
    }
};

这样,search.php当使用JavaScript的查看器查看您的增强功能时,就会将禁用JavaScript的人员定向到。


17

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

的HTML

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

一点点的jQuery

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

要么

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

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

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

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

这是上面提到的jsFiddle示例。


16

根据您要完成的工作,您可能会忘记onclick而仅使用href:

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

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

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

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


3
唯一的缺点(从内存来看,我可能是错的)是,如果您内部没有href,IE不会将A视为A。(因此CSS规则将不起作用)
Benjol

16

当我有几个人造链接时,我更喜欢给他们一类“无链接”。

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

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

对于HTML,链接很简单

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

我不喜欢使用哈希标签,除非将它们用于锚点,并且只有在我拥有两个以上的虚假链接时才执行上述操作,否则我将使用javascript:void(0)。

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

通常,我只想完全避免使用链接,而只是在跨度中包裹一些内容,并将其用作激活某些JavaScript代码的方式,例如弹出窗口或内容展示。


16

我相信您提出的是错误的二分法。这些不是仅有的两个选择。

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


另外,如果您a要用代替a span,则需要记住使其通过键盘可聚焦。
AndFisher

16

我用开发人员工具在谷歌浏览器中尝试了两次,id="#"花了0.32秒。而该javascript:void(0)方法仅花费了0.18秒。因此,在谷歌浏览器中,javascript:void(0)效果更好,更快。


实际上,他们不这样做。#使您跳到页面顶部。
Jochen Schultz

13

我基本上是从这篇使用渐进增强的实用文章来解释的。简短的答案是您从不使用,javascript:void(0);或者#除非您的用户界面已经推断启用了JavaScript,否则应使用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>

就搜索引擎优化而言,我更喜欢这种方式。使用尽可能多的友好URL绝对可以提高页面价值。
Chetabahana
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.