<a href="javascript:void(0)" id="loginlink">login</a>
我已经见过这样的 href很多次了,但我不知道这究竟意味着什么。
href
这意味着它什么都不做。这是试图让链接不在任何地方“导航”。但这不是正确的方式。
你实际上应该在onclick事件中只return false,如下所示:
onclick
return false
<a href="#" onclick="return false;">hello</a>
通常,如果链接正在做一些“JavaScript y”的事情,就会使用它。比如发布AJAX表单,或交换图像,或其他什么。在这种情况下,您只需将任何函数称为返回false。
false
但是,为了使您的网站完全令人敬畏,通常您会包含一个执行相同操作的链接,如果浏览它的人选择不运行JavaScript。
<a href="backup_page_displaying_image.aspx"onclick="return coolImageDisplayFunction();">hello</a>
void运算符计算给定的表达式,然后返回undefined。 void运算符通常仅用于获取undefined原语值,通常使用“void(0)”(其中相当于“void 0”)。在这些情况下,全局变量#0可以使用(假设它有未分配给非默认值)。
void运算符计算给定的表达式,然后返回undefined。
void
undefined
void运算符通常仅用于获取undefined原语值,通常使用“void(0)”(其中相当于“void 0”)。在这些情况下,全局变量#0可以使用(假设它有未分配给非默认值)。
void(0)
void 0
这里提供了一个解释:#0运算符。
您想使用链接的href执行此操作的原因是,通常情况下,javascript: URL会将浏览器重定向到评估该JavaScript结果的纯文本版本。但是如果结果是undefined,那么浏览器将停留在同一页面上。void(0)只是一个简短而简单的脚本,评估结果为undefined。
javascript:
您的一个标签上应该始终有一个href。调用返回“未定义”的JavaScript函数会很好。链接到“#”也是如此。
没有href的Internet Explorer 6中的锚标记不会应用a:hover样式。
a:hover
是的,它是可怕的,是一种轻微的危害人类罪,但总的来说,Internet Explorer 6也是如此。
我希望这能有所帮助。
Internet Explorer 6实际上是一项重大的反人类罪。
#与javascript:void(0);的行为存在巨大差异。
#
javascript:void(0);
#将您滚动到页面顶部,但javascript:void(0);不会。
如果您正在编写动态页面,这一点非常重要,因为当用户单击页面上的链接时,他们不想回到顶部。
除了技术答案,javascript:void意味着作者做错了。
javascript:void
没有很好的理由使用javascript:伪URL(*)。在实践中,如果任何人尝试“书签链接”、“在新选项卡中打开链接”等东西,它会导致混乱或错误。现在人们已经习惯了中键点击新选项卡,这种情况经常发生:它看起来像一个链接,你想在新选项卡中阅读它,但事实证明它根本不是真正的链接,并在中键点击时给出不需要的结果,如空白页面或JS错误。
<a href="#">是一个常见的替代方案,可以说不那么糟糕。但是,您必须记住onclick事件处理程序中的return false,以防止链接被跟踪并向上滚动到页面顶部。
<a href="#">
在某些情况下,可能有一个实际有用的地方可以指向链接。例如,如果您有一个可以单击打开先前隐藏的<div id="foo">的控件,那么使用<a href="#foo">链接到它是有意义的。或者,如果有一种非JavaScript的方式来做同样的事情(例如,“thispage.php?show=foo”将foo设置为可见开头),您可以链接到它。
<div id="foo">
<a href="#foo">
否则,如果一个链接只指向某个脚本,它就不是一个真正的链接,不应该被标记为链接。通常的方法是将onclick添加到<span>、<div>或<a>中,而不添加href,并以某种方式设置样式,使其清楚地表明您可以单击它。这就是StackOverflow[在撰写本文时所做的;现在它使用href="#"]。
<span>
<div>
<a>
href="#"
这样做的缺点是你失去了键盘控制,因为你不能选项卡到跨度/div/bare-a上或用空格激活它。这是否真的是一个缺点取决于元素打算采取什么样的操作。你可以通过向元素添加tabIndex并监听Space按键来尝试模仿键盘的可交互性。但它永远不会100%再现真实的浏览器行为,尤其是因为不同的浏览器对键盘的响应不同(更不用说非视觉浏览器了)。
tabIndex
如果你真的想要一个不是链接但可以通过鼠标或键盘正常激活的元素,你想要的是<button type="button">(或者<input type="button">也一样好,对于简单的文本内容)。如果你愿意,你可以随时使用CSS重新设置它的样式,使它看起来更像链接而不是按钮。但由于它的行为像按钮,所以你应该这样标记它。
<button type="button">
<input type="button">
(*:无论如何,在网站创作中。显然它们对书签很有用。javascript:伪URL是一种概念上的奇异:一个不指向位置的定位器,而是在当前位置内调用活动代码。它们给浏览器和网络应用程序带来了巨大的安全问题,不应该由Netscape发明。)
void是一个运算符,用于返回undefined值,因此浏览器将无法加载新页面。
Web浏览器将尝试获取任何用作URL的内容并加载它,除非它是返回null的JavaScript函数。例如,如果我们单击这样的链接:
<a href="javascript: alert('Hello World')">Click Me</a>
然后将显示一条警报消息而不加载新页面,这是因为alert是一个返回空值的函数。这意味着当浏览器尝试加载新页面时,它会看到null并且没有任何东西可以加载。
alert
关于val运算符需要注意的一件重要事情是它需要一个值并且不能自己使用。我们应该像这样使用它:
<a href="javascript: void(0)">I am a useless link</a>
void运算符计算给定的表达式,然后返回未定义。它避免刷新页面。
这是一种非常流行的将JavaScript函数添加到超文本标记语言链接的方法。例如:您在许多网页上看到的[Print]链接是这样写的:
[Print]
<a href="javascript:void(0)" onclick="callPrintFunction()">Print</a>
为什么我们需要href,而只有onclick可以完成工作?因为当用户将鼠标悬停在文本“打印”上时,没有href,光标将更改为插入符号()而不是指针(&onclick28070;)。只有在a标签上有href才能将其验证为超链接。
a
href="javascript:void(0);"的替代方案是使用href="#"。这种替代方案不需要在用户的浏览器中打开JavaScript,因此它更兼容。
href="javascript:void(0);"
要理解这个概念,首先应该了解JavaScript中的空运算符。
无效运算符的语法是:void «expr»,它计算extr并返回untex。
void «expr»
如果你把val实现为一个函数,它看起来如下:
function myVoid(expr) {return undefined;}
这个空运算符有一个重要的用法——丢弃表达式的结果。
在某些情况下,返回未定义而不是表达式的结果是很重要的。然后可以使用val来丢弃该结果。其中一种情况涉及javascript: URL,链接应该避免使用它,但对书签很有用。当你访问其中一个URL时,许多浏览器会将当前文档替换为评估URL“内容”的结果,但前提是结果不是未定义。因此,如果你想在不更改当前显示内容的情况下打开一个新窗口,你可以执行以下操作:
javascript:void window.open("http://example.com/")
值得一提的是,您在检查未定义时有时会看到void 0,仅仅是因为它需要更少的字符。
例如:
if (something === undefined) {doSomething();}
对比:
if (something === void 0) {doSomething();}
出于这个原因,一些缩小方法将undefined替换为void 0。
使用javascript:void(0)意味着超文本标记语言的作者滥用锚元素代替按钮元素。
javascript:void(0)
锚标签经常被滥用与onClick事件来创建通过将href设置为“#”或“javascript: ull(0)”设置为阻止页面刷新。这些值会导致意外复制/拖动链接时的行为,在新的选项卡/窗口、书签以及JavaScript仍在下载时,错误,或被禁用。这也传达了不正确的语义学给辅助技术(例如屏幕阅读器)。在这些情况下,它是建议使用<button>代替。一般来说,您应该只使用使用正确URL进行导航的锚点。
<button>
来源:MDN的#0页面
链接必须指定href目标才能使其成为可用的显示对象。
大多数浏览器不会在<a>元素的href中解析高级JavaScript,例如:
<a href="javascript:var el = document.getElementById('foo');">Get element</a>
因为大多数浏览器中的href标签不允许使用空格或将空格转换为%20(空格的HEX代码),JavaScript解释器将遇到多个错误。
%20
因此,如果您想使用<a>元素的href来执行内联JavaScript,您必须首先为href指定一个不太复杂(不包含空格)的有效值,然后在onClick、onMouseOver、onMouseOut等事件属性标记中提供JavaScript。
onClick
onMouseOver
onMouseOut
典型的答案是这样做:
<a href="#" onclick="var el = document.getElementById('foo');">Get element</a>
这工作正常,但它使页面滚动到顶部,因为href中的#告诉浏览器这样做。
在<a>元素的href中放置#指定根锚点,默认情况下是页面的顶部,但您可以通过在<a>元素中指定name属性来指定不同的位置。
name
<a name="middleOfPage"></a>
然后,您可以将<a>元素的href更改为跳转到middleOfPage并在onClick事件中执行JavaScript:
middleOfPage
<a href="#middleOfPage" onclick="var el = document.getElementById('foo');">Get element</a>
会有很多时候,你不希望链接跳来跳去,所以你可以做两件事:
<a href="#thisLinkName" name="thisLinkCame" onclick="var elem = document.getElementById('foo');">Get element</a>
现在,当单击时,它将无处可去,但它可能会导致页面从当前视口重新居中。
使用<a>元素的href使用内联javascript的最佳方法,但无需执行上述任何操作是JavaScript:void(0);:
JavaScript:void(0);
<a href="javascript:void(0);" onclick="var el = document.getElementById('foo');">Get element</a>
这告诉浏览器no去任何地方,而是执行href中的JavaScript:void(0);函数,因为它不包含空格,也不会被解析为URL。它将由编译器运行。
void是一个关键字,当提供0参数时返回undefined,它不使用任何更多资源来处理在不指定0的情况下发生的返回值(它对内存管理/性能更友好)。
0
接下来发生的事情是onClick被执行。页面没有移动,显示方面什么也没有发生。
Web开发人员使用javascript:void(0)是因为它是防止a标签的默认行为的最简单方法。void(*anything*)返回undefined并且它是一个假值。返回一个假值就像a标签的onclick事件中的return false一样,可以防止其默认行为。
void(*anything*)
所以我认为javascript:void(0)是防止a标签默认行为的最简单方法。
从我所看到的,#0运算符在JavaScript中有3种常见用途。你所指的那个,<a href="javascript:void(0)">是使<a>标签成为无操作的常见技巧。一些浏览器根据href是否有<a>标签而区别对待<a>标签,所以这是一种创建href没有任何作用的链接的方法。
<a href="javascript:void(0)">
void运算符是一个接受参数并返回undefined的一元操作符。所以var x = void 42;意味着x === undefined。这很有用,因为在严格模式之外,undefined实际上是一个有效的变量名。所以一些JavaScript开发人员使用void 0而不是undefined。理论上,你也可以做<a href="javascript:undefined">,它和void(0)是一样的。
var x = void 42;
x === undefined
<a href="javascript:undefined">