提问人: 提问时间:9/26/2008 最后编辑:18 revs, 12 users 36%Peter Mortensen 更新时间:5/29/2023 访问量:2495642
我应该对 JavaScript 链接使用哪个“href”值,“#”或“javascript:void(0)”?
Which "href" value should I use for JavaScript links, "#" or "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>
答:
'#'
会把用户带回页面顶部,所以我通常用.void(0)
javascript:;
也表现得像javascript:void(0);
评论
#
#something
#!
第一个,理想情况下,如果用户禁用了 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
评论
不要忽视你的URL可能是必要的 - onclick是在引用被跟踪之前触发的,所以有时你需要在离开页面之前处理一些客户端的东西。
除非您使用 JavaScript 写出链接(以便您知道它在浏览器中已启用),否则理想情况下,您应该为在禁用 JavaScript 的情况下浏览的用户提供适当的链接,然后在 onclick 事件处理程序中阻止链接的默认操作。这样,启用了 JavaScript 的用户将运行该函数,而禁用了 JavaScript 的用户将跳转到适当的页面(或同一页面中的位置),而不仅仅是单击链接而什么也没发生。
也不。
如果您可以拥有一个有意义的实际 URL,请使用它作为 HREF。如果有人中键点击您的链接以打开新标签页,或者他们禁用了 JavaScript,则不会触发 onclick。
如果这是不可能的,那么你至少应该使用 JavaScript 和适当的 click 事件处理程序将锚标记注入到文档中。
我意识到这并不总是可能的,但在我看来,在开发任何公共网站时都应该努力实现这一点。
查看 Unobtrusive JavaScript 和 Progressive enhancement(均为维基百科)。
评论
理想情况下,您可以这样做:
<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>
或者,更好的是,您将在 HTML 中拥有默认的操作链接,并且在 DOM 渲染后通过 JavaScript 将 onclick 事件添加到元素中,从而确保如果 JavaScript 不存在/未使用,您不会有无用的事件处理程序来扰乱您的代码并可能混淆(或至少分散您的实际内容的注意力)。
让禁用 JavaScript 的用户能够访问您的网站是件好事,在这种情况下,href 指向执行与正在执行的 JavaScript 相同的操作的页面。否则,我使用带有“的”#“来防止默认操作(滚动到页面顶部),正如其他人所提到的。return false;
谷歌搜索“”提供了有关此主题的大量信息。其中一些,比如这个,提到了不使用 void(0) 的原因。javascript:void(0)
评论
javascript:void(0);
如果您想使用禁用内联 JavaScript 的严格内容安全策略,也不好。
理想情况下,您应该有一个真实的 URL 作为非 JavaScript 用户的后备。
如果这没有意义,请使用作为属性。我不喜欢使用该属性,因为它将 JavaScript 直接嵌入到 HTML 中。更好的主意是使用外部 JS 文件,然后将事件处理程序添加到该链接。然后,您可以阻止默认事件,以便在用户单击该 URL 后 URL 不会更改以附加 URL。#
href
onclick
#
如果你问我,也不会;
如果你的“链接”的唯一目的是运行一些JavaScript代码,那么它就不符合链接的条件;而是一段带有 JavaScript 函数的文本。我建议使用一个带有附加标签和一些基本的 CSS 来模仿链接。链接是为导航而创建的,如果您的 JavaScript 代码不是用于导航的,则它不应该是标记。<span>
onclick handler
<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>
评论
<span>
s 并不意味着做任何事情。nchors 并用于此!<A>
<buttons>
buttons
span
<a>
标签。”— 即使 JavaScript 代码是“用于导航”的,链接也可能不是每次都合适。
根据您想要完成的任务,您可以忘记 onclick,而只使用 href:
<a href="javascript:myJsFunc()">Link Text</a>
它绕过了返回 false 的需要。我不喜欢这个选项,因为如前所述,它会将用户带到页面顶部。如果用户没有启用 JavaScript,您有其他地方可以发送给用户(这在我工作的地方很少见,但是一个非常好的主意),那么 Steve 提出的方法效果很好。#
<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>
最后,如果你不想让任何人去任何地方,如果你不想调用 JavaScript 函数,你可以使用。如果您有一个图像,您希望发生鼠标悬停事件,但用户没有可单击的任何内容,则效果很好。javascript:void(0)
评论
我相信你提出了一个错误的二分法。这不是唯一的两个选项。
我同意 D4V360 先生的观点,他建议,即使您使用了锚点标签,您在这里也没有真正的锚点。您所拥有的只是文档的一个特殊部分,其行为应该略有不同。标签要合适得多。<span>
评论
a
span
如果您使用链接作为仅执行某些 JavaScript 代码的一种方式(而不是使用像 D4V360 那样的跨度),只需执行以下操作:
<a href="javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>
如果您使用带有 onclick 的链接进行导航,请不要在 JavaScript 关闭时使用 href=“#” 作为回退。当用户点击链接时,通常很烦人。相反,如果可能,请提供 onclick 处理程序提供的相同链接。如果无法做到这一点,请跳过 onclick,只在 href 中使用 JavaScript URI。
评论
我用.javascript:void(0)
原因有三。鼓励在一组开发人员中使用不可避免地会导致一些人使用函数的返回值,如下所示:#
function doSomething() {
//Some code
return false;
}
但是他们忘记在 onclick 中使用,而只是使用 .return doSomething()
doSomething()
避免的第二个原因是,如果被调用的函数抛出错误,final 将不会执行。因此,开发人员还必须记住在被调用的函数中适当地处理任何错误。#
return false;
第三个原因是,在某些情况下,事件属性是动态分配的。我更喜欢能够调用函数或动态分配它,而不必专门为一种或另一种附加方法编写函数代码。因此,我在 HTML 标记中的(或任何东西)看起来像这样:onclick
onclick
onclick="someFunc.call(this)"
或
onclick="someFunc.apply(this, arguments)"
使用避免了上述所有令人头疼的问题,而且我没有发现任何缺点的例子。javascript:void(0)
因此,如果你是一个单独的开发人员,那么你可以清楚地做出自己的选择,但如果你作为一个团队工作,你必须声明:
使用 ,确保始终在末尾包含,任何调用的函数都不会抛出错误,如果将函数动态附加到属性,请确保它不仅不抛出错误,还返回 。href="#"
onclick
return false;
onclick
false
或
用href="javascript:void(0)"
第二个显然更容易沟通。
评论
javascript:void(0)
href='#'
event.preventDefault()
href='#void'
id="void"
href
$('a[href="#"]').click(function(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; });
#void
尽管如此,还是会向浏览器历史记录添加一个条目。另一种方法是使用返回 HTTP 状态 204 的资源的 URL(并且仍然使用 - 204 只是一个回退)。preventDefault
const voidLinks = document.querySelectorAll('a[href="#"') for (const voidLink of voidLinks) { voidLink.addEventListener('click', e => { e.preventDefault ? e.preventDefault() : e.returnValue = false }) voidLink.addEventListener('keypress', e => { if (e.keyCode === 13) e.preventDefault ? e.preventDefault() : e.returnValue = false }) }
如果你正在使用一个元素,只需使用这个:<a>
<a href="javascript:myJSFunc();" />myLink</a>
就我个人而言,我稍后会用 JavaScript 附加一个事件处理程序(使用或可能<把你最喜欢的 JavaScript 框架放在这里>)。attachEvent
addEventListener
评论
我同意其他地方的建议,即您应该在属性中使用常规 URL,然后在 onclick 中调用一些 JavaScript 函数。缺陷是,它们在调用后自动添加。href
return false
这种方法的问题在于,如果该功能不起作用或出现任何问题,链接将变得不可点击。Onclick 事件将始终返回,因此不会调用普通 URL。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
我建议改用元素,特别是当控件应该在数据中产生更改时。(类似于 POST。<button>
如果你不显眼地注入元素,那就更好了,这是一种渐进式的增强。(请参阅此评论。
评论
通常,您应该始终有一个回退链接,以确保禁用了 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 的用户就会被定向到,而使用 JavaScript 的查看者则会查看您的增强功能。search.php
最好使用jQuery,
$(document).ready(function() {
$("a").css("cursor", "pointer");
});
并省略 和 。href="#"
href="javascript:void(0)"
锚标记标记将如下所示
<a onclick="hello()">Hello</a>
很简单!
评论
只是为了抓住其他人提到的一点。
最好绑定事件 'onload'a 或 $('document').ready{};然后将 JavaScript 直接放入 click 事件中。
在 JavaScript 不可用的情况下,我会使用当前 URL 的 href,也许还会使用链接位置的锚点。该页面仍然可供没有 JavaScript 的人使用,那些没有 JavaScript 的人不会注意到任何差异。
正如我手头的,这里有一些jQuery可能会有所帮助:
var [functionName] = function() {
// do something
};
jQuery("[link id or other selector]").bind("click", [functionName]);
评论
你也可以像这样在锚点中写一个提示:
<a href="javascript:void('open popup image')" onclick="return f()">...</a>
因此,用户将知道此链接的作用。
我使用以下内容
<a href="javascript:;" onclick="myJsFunc();">Link</a>
相反
<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>
评论
href="javascript:"
并且都是等价的,但它们都同样糟糕。href="javascript:void 0;"
当然,hash () 更好,因为在 JavaScript 中它是一个伪方案:#
- 污染历史
- 实例化引擎的新副本
- 在全局范围内运行,不遵循事件系统。
当然,“#”带有阻止默认操作的 onclick 处理程序会 [得多] 更好。此外,一个唯一目的是运行 JavaScript 的链接并不是真正的“链接”,除非你在出现问题时将用户发送到页面上的某个明智的锚点(只是 # 会发送到顶部)。您可以简单地使用样式表模拟链接的外观和感觉,而完全忘记 href。
此外,关于cowgod的建议,特别是这个: 这是一个很好的方法,但它没有区分“JavaScript 禁用”和“onclick 失败”场景。...href="javascript_required.html" onclick="...
#
比 好,但以下更好: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 属性和协议也被认为是不好的形式。
评论
click
与整体情绪完全一致,在需要时使用,并在需要时使用有效的 URL。void(0)
使用 URL 重写,您可以使 URL 不仅可以在禁用 JavaScript 的情况下执行您想要执行的操作,还可以确切地告诉您它将执行哪些操作。
<a href="./Readable/Text/URL/Pointing/To/Server-Side/Script" id="theLinkId">WhyClickHere</a>
在服务器端,您只需要解析 URL 和查询字符串并执行您想要的操作。如果你很聪明,你可以允许服务器端脚本以不同的方式响应 Ajax 和标准请求。允许您拥有简洁的集中式代码来处理页面上的所有链接。
优点
- 显示在状态栏中
- 通过 JavaScript 中的 onclick 处理程序轻松升级到 Ajax
- 实际上评论本身
- 防止您的目录中充斥着一次性 HTML 文件
缺点
- 仍应在 JavaScript 中使用 event.preventDefault()
- 服务器端相当复杂的路径处理和 URL 解析。
我敢肯定还有更多的缺点。随意讨论它们。
这里还有一件更重要的事情要记住。符合第 508 条。 正因为如此,我觉得有必要指出,您需要 JAWS 等屏幕阅读器的锚点标签才能通过 Tab 键聚焦它。因此,“只使用 JavaScript 并忘记一开始就使用锚点”的解决方案不是其中某些选项。只有在您负担不起屏幕跳回顶部时,才需要在 href 中触发 JavaScript。你可以使用 settimeout 0 秒,让 JavaScript 触发到你需要关注的地方,但即使是 apage 也会跳到顶部,然后跳回来。
我选择 use ,因为使用这可能会阻止右键单击打开内容菜单。但更短,做同样的事情。javascript:void(0)
javascript:;
使用只会做出一些有趣的动作,所以如果您想节省打字工作,我建议您使用。#
#self
JavaScript bla, bla,
评论
#self
a
onclick
)
我强烈希望尽可能地将我的 JavaScript 排除在我的 HTML 标记之外。如果我使用 as click 事件处理程序,那么我建议使用 .<a>
<a class="trigger" href="#">Click me!</a>
$('.trigger').click(function (e) {
e.preventDefault();
// Do stuff...
});
需要注意的是,许多开发人员认为对点击事件处理程序使用锚标记并不好。他们希望你使用一个或一些CSS来增加它。这是一个争论不休的问题。<span>
<div>
cursor: pointer;
我基本上是使用渐进式增强来解释这篇实用文章。简短的回答是,你永远不要使用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>
评论
我从你的话中了解到,你想创建一个链接只是为了运行 JavaScript 代码。
然后你应该考虑到有些人在他们的浏览器中阻止了 JavaScript。
因此,如果您真的打算将该链接仅用于运行 JavaScript 函数,那么您应该动态添加它,这样即使用户没有在浏览器中启用他们的 JavaScript,并且您使用该链接只是为了触发 JavaScript 函数,当浏览器中禁用 JavaScript 时,使用这样的链接是没有意义的。
出于这个原因,当禁用 JavaScript 时,它们都不好。
如果启用了 JavaScript,并且您只想使用该链接来调用 JavaScript 函数,则
<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>
比使用要好得多
<a href="#" onclick="myJsFunc();">Link</a>
因为 href=“#” 将导致页面执行不需要的操作。
此外,另一个更好的原因是 JavaScript 被用作大多数浏览器的默认脚本语言。例如,Internet Explorer 使用 onclick 属性来定义将使用的脚本语言的类型。除非出现另一种好的脚本语言,否则 Internet Explorer 也将使用 JavaScript 作为默认语言,但如果使用另一种脚本语言,它将让 Internet Explorer 了解正在使用的脚本语言。<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>
<a href="#" onclick="myJsFunc();">Link</a>
javascript:
考虑到这一点,我更喜欢使用和锻炼
<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>
足以让它成为一种习惯,并且更加用户友好,请在 JavaScript 代码中添加这种链接:
$(document).ready(function(){
$(".blabla").append('<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>')
});
老实说,我建议两者都不建议。我会为这种行为使用风格化。<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。我还建议通过脚本绑定,而不是使用元素标签上的属性。唯一的问题是无法禁用的旧 IE 中的伪 3d 文本效果。onclick
如果您必须使用 A 元素,请出于已经提到的原因使用。javascript:void(0);
- 如果 onclick 事件失败,将始终拦截。
- 不会发生错误的加载调用,也不会根据哈希更改触发其他事件
- 如果点击失败(onclick 引发),则哈希标记可能会导致意外行为,除非它是适当的失败行为,并且您想要更改导航历史记录,否则请避免使用。
注意:您可以用字符串替换 ,例如,它可以用作额外的指示器,显示点击的实际作用。0
javascript:void('Delete record 123')
评论
button
<a>
<button>
<a>
<button>
我会使用:
<a href="#" onclick="myJsFunc();return false;">Link</a>
原因:
- 这使得搜索引擎需要它变得简单。如果使用其他任何内容(例如字符串),则可能会导致错误。
href
404 not found
- 当鼠标悬停在链接上时,它不会显示它是一个脚本。
- 通过使用 ,页面不会跳转到顶部或破坏按钮。
return false;
back
评论
做 or 或其他任何包含属性的东西 - 五年前是可以的,尽管现在它可能是一种不好的做法。原因如下:<a href="#" onclick="myJsFunc();">Link</a>
<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>
onclick
它促进了突兀式 JavaScript 的实践——事实证明,这种 JavaScript 难以维护且难以扩展。在 Unobtrusive JavaScript 中对此进行了更多介绍。
你把时间花在编写令人难以置信的过于冗长的代码上——这对你的代码库几乎没有好处(如果有的话)。
现在有更好、更简单、更易于维护和可扩展的方法来实现预期结果。
不显眼的 JavaScript 方式
只是根本没有属性!任何好的 CSS 重置都会处理丢失的默认光标样式,因此这不是问题。然后使用优雅且不显眼的最佳实践来附加您的 JavaScript 功能 - 这些实践更易于维护,因为您的 JavaScript 逻辑保留在 JavaScript 中,而不是在您的标记中 - 当您开始开发大规模 JavaScript 应用程序时,这是必不可少的,这些应用程序需要将您的逻辑拆分为黑盒组件和模板。有关此内容的更多信息,请参阅大规模 JavaScript 应用程序体系结构href
简单的代码示例
// 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 实践,并在少量代码中拥有一个可以在页面上多次重复的组件,而不会产生副作用或不同组件实例之间的冲突。了不起!
笔记
省略元素上的属性将导致无法使用键导航访问该元素。如果您希望通过键访问这些元素,您可以设置属性,或者改用元素。您可以轻松地设置按钮元素的样式,使其看起来像 Tracker1 的答案中提到的普通链接。
href
a
tab
tab
tabindex
button
省略元素上的属性将导致 Internet Explorer 6 和 Internet Explorer 7 不采用样式,这就是为什么我们添加了一个简单的 JavaScript 填充码来代替通过以下方式实现此目的。这是完全可以的,因为如果你没有 href 属性并且没有优雅的降级,那么你的链接无论如何都不会起作用 - 你会有更大的问题需要担心。
href
a
a:hover
a.hover
如果你希望你的操作在禁用 JavaScript 的情况下仍然有效,那么使用一个带有属性的元素,该元素将转到某个 URL 中,该 URL 将手动执行该操作,而不是通过 Ajax 请求或任何应该要走的路。如果你正在这样做,那么你要确保你做一个点击调用,以确保当按钮被点击时,它不会跟随链接。此选项称为正常降级。
a
href
event.preventDefault()
评论
为了完整起见,这里还有一个选项,即使禁用了 JavaScript,它也可以防止链接执行任何操作,而且:)很短
<a href="#void" onclick="myJsFunc()">Run JavaScript function</a>
如果 ID 不在页面上,则该链接将不执行任何操作。
总的来说,我同意 Aaron Wagner 的回答,JavaScript 链接应该与 JavaScript 代码一起注入到文档中。
评论
我看到很多想要继续使用值的人的答案,因此,这里有一个希望满足两个阵营的答案:#
href
A) 我很高兴拥有以下价值:javascript:void(0)
href
<a href="javascript:void(0)" onclick="someFunc.call(this)">Link Text</a>
B)我正在使用jQuery,并希望作为我的值:#
href
<a href="#" onclick="someFunc.call(this)">Link Text</a>
<script type="text/javascript">
/* Stop page jumping when javascript links are clicked.
Only select links where the href value is a #. */
$('a[href="#"]').live("click", function(e) {
return false; // prevent default click action from happening!
e.preventDefault(); // same thing as above
});
</script>
请注意,如果您知道链接不会动态创建,请改用以下函数:click
$('a[href="#"]').click(function(e) {
当我有几个虚假链接时,我更喜欢给他们一类“无链接”。
然后在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 代码的一种方式,例如弹出窗口或内容显示。
您可以使用 href 并删除所有只有哈希值的链接:
HTML格式:
<a href="#" onclick="run_foo()"> foo </a>
JS:
$(document).ready(function(){ // on DOM ready or some other event
$('a[href=#]').attr('href',''); // set all reference handles to blank strings
// for anchors that have only hashes
});
评论
onclick="return run_foo()"
false
return false
href="render/full_page.script?arg=value" onclick="loadAJAXContent.call(this); return false"
你不应该在你的HTML中使用内联,以免被无意义的代码污染它;所有单击绑定都必须在 Javascript 文件 (*.js) 中设置。onclick="something();"
像这样设置绑定:或$('#myAnchor').click(function(){... **return false**;});
$('#myAnchor').bind('click', function(){... **return false**;});
然后你就有了一个干净的 HTML 文件,易于加载(并且对 seo 友好),没有成千上万的href="javascript:void(0);"
href="#"
评论
href
href
a
如果你碰巧使用的是 AngularJS,你可以使用以下命令:
<a href="">Do some fancy JavaScript</a>
这不会做任何事情。
另外
- 它不会像 (#) 那样将您带到页面顶部
- 因此,您不需要使用 JavaScript 显式返回
false
- 因此,您不需要使用 JavaScript 显式返回
- 它简明扼要
评论
因此,当你用标签做一些 JavaScript 事情时,如果你也放了标签,你可以在事件末尾添加 return false(在内联事件绑定的情况下),例如:<a />
href="#"
<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 代替来做一些事情或任何其他元素,例如 b、span 或任何适合您的元素,因为您可以在所有元素上添加事件。<button />
因此,使用有一个好处。默认情况下,当您这样做时,您会在该元素上获得光标指针。为此,我认为您可以使用CSS来解决这个问题。<a href="#">
a href="#"
cursor:pointer;
最后,如果你从 JavaScript 代码本身绑定事件,如果你使用 tag,你可以这样做来实现这一点,但如果你不为此使用标签,你会得到一个优势,你不需要这样做。event.preventDefault()
<a>
<a>
所以,如果你看到,最好不要对这种东西使用标签。
我使用 href=“#” 作为我想要虚拟行为的链接。然后我使用以下代码:
$(document).ready(function() {
$("a[href='#']").click(function(event) {
event.preventDefault();
});
});
这意味着,如果 href 等于哈希值 (*=“#”),它会阻止默认链接行为,因此仍然允许您为其编写功能,并且不会影响锚点点击。
我想说最好的方法是将 href 锚点放在你永远不会使用的 ID,比如 #Do1Not2Use3This4Id5 或类似的 ID,你 100% 确定没有人会使用并且不会冒犯别人。
Javascript:void(0)
是一个坏主意,并且违反了启用 CSP 的 HTTPS 页面上的内容安全策略 https://developer.mozilla.org/en/docs/Security/CSP(感谢 @jakub.g)- 使用 just 会让用户在按下时跳回顶部
#
- 如果未启用 JavaScript,则不会破坏页面(除非您有 JavaScript 检测代码
- 如果启用了 JavaScript,则可以禁用默认事件
- 你必须使用 href,除非你知道如何阻止你的浏览器选择一些文本,(不知道使用 4 是否会删除阻止浏览器选择文本的东西)
基本上没有人在这篇文章中提到 5,我认为这很重要,因为如果您的网站突然开始选择链接周围的内容,它就会显得不专业。
我个人将它们组合使用。例如:
[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>
然后,使用包装在正文中、标记之前或外部 JavaScript 文档中的脚本将函数分配给。.link
</body>
<script>
(function($) {
$('.link').click(function() {
// do something
});
})(jQuery);
</script>
*注意:对于动态创建的元素,请使用:
$('.link').on('click', function() {
// do something
});
对于使用动态创建的元素创建的元素,请使用:
$(document).on('click','.link', function() {
// do something
});
然后,你可以用一点 CSS 来设置 span 元素的样式,使其看起来像一个锚点:
.link {
color: #0000ee;
text-decoration: underline;
cursor: pointer;
}
.link:active {
color: red;
}
这是上面提到的一个 jsFiddle 示例。
为什么不使用它呢?这不会向上滚动页面。
<span role="button" onclick="myJsFunc();">Run JavaScript Code</span>
评论
href="#"
role="button"
*[role="button"] { cursor:pointer; }
tabindex="0"
我通常会去
<a href="javascript:;" onclick="yourFunction()">Link description</a>
它比 javascript:void(0) 短,并且做同样的事情。
不要仅出于运行 JavaScript 的目的而使用链接。
使用 href=“#” 将页面滚动到顶部;使用 void(0) 会在浏览器中产生导航问题。
请改用链接以外的元素:
<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>
并使用 CSS 设置样式:
.funcActuator {
cursor: default;
}
.funcActuator:hover {
color: #900;
}
评论
span
tabindex="0"
.funcActuator:hover, .funcActuator:focus
我使用开发人员工具在谷歌浏览器中尝试了这两种方法,花了 0.32 秒。而该方法仅花费了 0.18 秒。因此,在谷歌浏览器中,工作得更好更快。id="#"
javascript:void(0)
javascript:void(0)
评论
在现代网站上,如果元素只执行 JavaScript 功能(而不是真正的链接),则应避免使用 href。
为什么? 此元素的存在告诉浏览器这是指向目标的链接。 这样,浏览器将显示“在新选项卡/窗口中打开”功能(当您使用 shift+click 时也会触发)。 这样做将导致打开同一页面时没有触发所需的功能(导致用户感到沮丧)。
关于IE: 从 IE8 开始,如果设置了 doctype,则元素样式(包括悬停)有效。其他版本的 IE 不再需要担心了。
唯一的缺点: 删除 HREF 将删除 tabindex。 为了解决这个问题,你可以使用一个样式化为链接的按钮,或者使用JS添加一个tabindex属性。
4.0 之前的 Bootstrap 模态有一个基本上没有记录的行为,它们将使用 AJAX 从元素加载 s,除非它们完全是 .如果您使用的是 Bootstrap 3,hrefs 将导致 javascript 错误:href
a
#
javascript:void(0);
AJAX Error: error GET javascript:void(0);
在这些情况下,您需要升级到 bootstrap 4 或更改 href。
于2019年1月编辑
在 HTML5 中,使用不带 href 属性的 a 元素是有效的。它被认为是一个“占位符超链接”
如果 a 元素没有 href 属性,则该元素表示一个占位符,该占位符表示链接可能已放置在何处(如果它是相关的),仅由元素的内容组成。
例:
<a>previous</a>
如果在那之后你想做其他事情:
1 - 如果您的链接没有转到任何地方,请不要使用元素。使用一个或其他合适的东西,并添加CSS来设置你的样式。<a>
<span>
:hover
2 - 如果您想保持原始、精确和快速,请使用 OR。javascript:void(0)
javascript:undefined
javascript:;
• is void to null value [未赋值],表示您的浏览器将点击进入 DOM,窗口返回 false。
• 不遵循 javascript 中的 DOM 或 Window。这意味着锚点 href 内的“#”符号是一个 LINK。链接到相同的电流方向。Javascript: void(0);
NULL
'#'
您可以在此处使用 javascript:void(0) 而不是使用 # 来停止锚标记重定向到标题部分。
function helloFunction() {
alert("hello world");
}
<a href="javascript:void(0)" onclick="helloFunction();">Call Hello Function</a>
评论
最简单和大家最常用的是javascript:void(0),你可以用它来代替使用#来停止标签重定向到标题部分。
<a href="javascript:void(0)" onclick="testFunction();">Click To check Function</a>
function testFunction() {
alert("hello world");
}
评论
这里实际上有四个选项。
使用允许您在禁用 JavaScript 的浏览器中安全“回退”或用户代理不支持它(现在用户的 1-5%)中保留锚点版本。您可以使用锚点“#”符号、空字符串或特殊 URL 来表示脚本失败。请注意,您必须使用一个,以便屏幕阅读器知道它是一个超链接。(注意:我不打算讨论删除属性的争论,因为这一点在这里没有意义。如果没有 on 锚点意味着锚点不再是超链接,而只是一个带有点击事件的 html 标记。return false;
href
href
href
href
<a href="" onclick="alert('hello world!');return false;">My Link</a>
<a href="#" onclick="alert('hello world!');return false;">My Link</a>
<a href="MyFallbackURL.html" onclick="alert('hello world!');return false;">My Link</a>
下面是当今更流行的设计,用于内部属性。如果浏览器不支持编写脚本,则应再次发布回其页面,因为会为超链接路径返回空字符串。如果您不关心谁支持 JavaScript,请使用此选项。javascript:void(0)
href
href
<a href="javascript:void(0);" onclick="alert('hello world!');">My Link</a>
javascript:void(0)
将来会弃用,因此您应该使用 .#
答:这两种方法对网站的加载速度都没有明显的影响。
解释:好吧,两者都同样有效。主要区别与点击操作有关。第一种方法 () 会将地址栏中的 URL 更改为“#,”。第二种方法 () 将使地址栏中的 URL 保持不变。因此,两者都很好。
提示:使用第二种方法作为最佳实践,即:因为它是更有效的 HTML,并且不会影响 URL 栏。(<a href="javascript:void(0)">)
评论
void(0)
void 0