“javascript：void（0）”是什么意思？

Question

<a href="javascript:void(0)" id="loginlink">login</a>

我已经多次见过这样的href，但我不知道究竟是什么意思。

Answer 1

  

void运算符评估给定的值   表达式，然后返回undefined。

     

void运算符通常仅用于运算符   获得undefined原语   值，通常使用“void(0)”（其中   相当于“void 0”）。在这些   案例，全局变量undefined   可以代替使用（假设它有   尚未分配到非默认值   值）。

此处提供了解释：void operator。

您希望使用href链接执行此操作的原因通常是，javascript:网址会将浏览器重定向到评估该JavaScript结果的纯文本版本。但如果结果为undefined，则浏览器会保留在同一页面上。 void(0)只是一个简短的脚本，其评估结果为undefined。

Answer 2

除了技术答案，javascript:void表示作者正在做错了。

没有充分的理由使用javascript:伪URL（*）。在实践中，如果有人尝试“书签链接”，“在新标签中打开链接”等内容，它将导致混淆或错误。这种情况发生了很多，现在人们已经习惯了中间点击换新标签：它看起来像一个链接，你想在新标签中读取它，但事实证明它根本不是真正的链接，并在中间点击时给出不需要的结果，如空白页面或JS错误。

<a href="#">是一种常见的替代方案，可能可以说不那么糟糕。但是，您必须记住return false事件处理程序中的onclick，以防止跟踪链接并向上滚动到页面顶部。

在某些情况下，可能有一个实际有用的地方指向链接。例如，如果你有一个控件，你可以点击它打开一个以前隐藏的<div id="foo">，使用<a href="#foo">链接到它是有道理的。或者，如果有一种非JavaScript的方式做同样的事情（例如，'thispage.php？show = foo'设置foo开头可见），你可以链接到那个。

否则，如果链接仅指向某个脚本，则它实际上不是链接，不应该这样标记。通常的方法是将onclick添加到<span>，<div>或<a>而不添加href，并以某种方式设置它以使其成为可能清楚你可以点击它。这就是StackOverflow [在撰写本文时所做的;现在它使用href="#"]。

这样做的缺点是你失去了键盘控制，因为你无法在span / div / bare-a上制作标签或用空格激活它。这是否实际上是一个缺点取决于元素打算采取什么样的行动。您可以通过向元素添加tabIndex并侦听Space按键来尝试模仿键盘交互性。但它永远不会100％重现真实的浏览器行为，尤其是因为不同的浏览器可以以不同的方式响应键盘（更不用说非可视浏览器）。

如果您真的想要一个不是链接但可以通过鼠标或键盘正常激活的元素，那么您想要的是<button type="button">（或<input type="button">同样好，简单的文字内容）。如果你愿意的话，你总是可以使用CSS来重新设置它，使它看起来更像是一个链接，而不是一个按钮。但由于它的行为就像一个按钮，这就是你应该如何标记它。

（*：在网站创作中，无论如何。显然它们对于bookmarklet很有用。javascript:伪URL是一个概念上的奇怪：一个定位器，它不指向某个位置，而是调用其中的活动代码。它们已经为浏览器和Web应用程序带来了大量安全问题，并且绝不应该由Netscape发明。）

Answer 3

这意味着它什么都不做。这是尝试让链接无法在任何地方“导航”。但这不是正确的方式。

您应该return false事件中的onclick，例如：

<a href="#" onclick="return false;">hello</a>

通常情况下，如果链接正在执行某些“JavaScript-y”操作，则会使用它。就像发布AJAX表单，或者交换图像一样。在这种情况下，您只需将任何函数称为return false。

然而，为了使您的网站完全出色，通常您会包含一个执行相同操作的链接，如果浏览它的人选择不运行JavaScript。

<a href="backup_page_displaying_image.aspx"
   onclick="return coolImageDisplayFunction();">hello</a>

Answer 4

“＃”与javascript：void

的行为存在巨大差异

“＃”滚动到页面顶部 而“javascript：void（0）;”没有。

如果您正在编写动态页面，这非常重要。 用户不想因为点击页面上的链接而返回顶部。

Answer 5

这是一种非常流行的方法，可以将JavaScript函数添加到HTML链接。
例如：您在许多网页上看到的[Print]链接都是这样编写的：

<a href="javascript:void(0)" onclick="callPrintFunction()">Print</a>

为什么我们需要href而onclick单独才能完成工作？因为当没有href时用户将鼠标悬停在文本“打印”上时，光标将变为插入符号（ꕯ）而不是指针符号（?）。只有href标记上的a才会将其验证为超链接。

href="javascript:void(0);"的替代方法是使用href="#"。此替代方案不需要在用户的浏览器中打开JavaScript，因此它更兼容。

Answer 6

您应该始终在 a 标记上使用href。调用返回'undefined'的JavaScript函数会很好。所以将链接到'＃'。

没有href的Internet Explorer 6中的锚标签不会应用a:hover样式。

是的，它是可怕的，是一种针对人类的轻微犯罪，但一般来说，Internet Explorer 6也是如此。

我希望这会有所帮助。

Internet Explorer 6实际上是一种危害人类的重大犯罪。

Answer 7

值得一提的是，在检查未定义时，有时会看到void 0，因为它需要更少的字符。

例如：

something === undefined

VS

something === void 0

由于这个原因，一些缩小方法用void 0替换undefined。

Answer 8

void是一个用于返回undefined值的运算符，因此浏览器无法加载新页面。

Web浏览器会尝试使用任何用作URL的内容并加载它，除非它是一个返回null的JavaScript函数。例如，如果我们点击这样的链接：

<a href="javascript: alert('Hello World')">Click Me</a>

然后会显示警报消息而不加载新页面，这是因为alert是一个返回空值的函数。这意味着当浏览器尝试加载新页面时，它会看到null并且无法加载。

关于void运算符的一个重要注意事项是它需要一个值，并且不能单独使用。我们应该像这样使用它：

<a href="javascript: void(0)">I am a useless link</a>

Answer 9

要理解这个概念，首先应该理解JavaScript中的void运算符。

void运算符的语法是：void «expr»，它计算expr并返回undefined。

如果将void实现为函数，则如下所示：

function myVoid(expr) {
    return undefined;
}

这个void运算符有一个重要用法 - 丢弃表达式的结果。

在某些情况下，返回undefined而不是表达式的结果很重要。然后可以使用void来丢弃该结果。其中一种情况涉及javascript：URL，链接应避免使用，但对于bookmarklet非常有用。当您访问其中一个URL时，许多浏览器会将当前文档替换为评估URL“内容”的结果，但前提是结果未定义。因此，如果要在不更改当前显示内容的情况下打开新窗口，可以执行以下操作：

javascript:void window.open("http://example.com/")

Answer 10

void运算符计算给定的表达式，然后返回undefined。 它避免刷新页面。

Answer 11

javascript:void(0)的用法意味着HTML的作者滥用了锚元素而不是按钮元素。

  

Anchor标签经常被onclick事件滥用来创建   通过将href设置为“＃”或“javascript：void（0）”来伪按钮   阻止页面刷新。这些值导致意外   复制/拖动链接，打开新链接时的行为   选项卡/窗口，书签以及JavaScript仍在下载时，   错误输出或被禁用。这也传达了不正确的语义   辅助技术（例如，屏幕阅读器）。在这些情况下，它是   建议改为使用<button>。一般来说，你应该只使用   使用正确的URL进行导航的锚点。

来源：MDN's <a> Page。

Answer 12

链接必须指定一个HREF目标才能使其成为可用的显示对象。

大多数浏览器都不会解析

中的高级JavaScript

<A HREF="" 

标签如：

<A href="JavaScript:var elem = document.getElementById('foo');" 

因为大多数浏览器中的HREF标记不允许使用空格，或者将空格转换为％20，所以HEX等同于SPACE，这使得JavaScript对解释器绝对无用。

因此，如果您想使用A HREF标记来执行内联JavaScript，则必须为HREF FIRST指定一个有效的值，该值不太复杂（不包含空格），然后提供JavaScript在OnClick，OnMouseOver，OnMouseOut等事件属性标记中

典型的答案是做这样的事情：

<A HREF="#" onclick="var elem = document.getElementById('foo');">Get the object</a>

这样可以正常工作但它会使页面跳到顶部，因为井号/哈希标记告诉它这样做。

在A HREF标记中提供井号/散列标记实际上指定了根锚，默认情况下，它始终是页面顶部，您可以通过在A HREF中指定NAME属性来指定其他位置标签

<A NAME='middleofpage'></A>

然后，您可以更改A HREF标记，以跳转到＆＃39; middleofpage＆＃39;并在OnClick事件中执行JavaScript，如果发生这样的话：

<A HREF="#middleofpage" onclick="var elem = document.getElementById('foo');">Get the object</a>

有很多次你不希望链接跳转，所以你可以做两件事：

<A HREF="#thislinkname" name='thislinkname' onclick="var elem = document.getElementById('foo');">Get the object</a>

现在它在点击时无处可去，但它可能会导致页面从其当前视口重新定位。这不漂亮。使用A HREF提供内联javascript的最佳方法是什么，但无需执行上述任何操作？的JavaScript：无效（0）;

<A HREF="JavaScript:void(0);" onclick="var elem = document.getElementById('foo');">Get the object</a>

这告诉浏览器去NOWHERE，而是执行有效的JavaScript：void（0）;首先在HREF标记中起作用，因为它不包含空格，并且不会被解析为URL。它将由编译器运行。 VOID是一个关键字，当提供一个0的参数时返回UNDEFINED，它不再使用任何资源来处理在没有指定0的情况下发生的返回值（它更符合内存管理/性能）。

接下来发生的事情是执行OnClick。页面不移动，没有任何显示方式。

Answer 13

Web开发人员使用javascript:void(0)是因为它是防止a标记的默认行为的最简单方法。 void(*anything*)返回undefined，它是一个伪造的值。并且返回伪造的值就像return false标签的onclick事件中的a一样，可以防止其默认行为。

所以我认为javascript:void(0)是防止a标签默认行为的最简单方法。

Answer 14

据我所知，void operator 在 JavaScript 中有 3 种常见用途。您所指的那个 <a href="javascript:void(0)"> 是使 <a> 标记无操作的常用技巧。一些浏览器根据是否有 <a> 来区别对待 href 标签，因此这是一种创建带有 href 的链接的方法，它什么也不做。

void 运算符是一个一元运算符，它接受一个参数并返回 undefined。所以var x = void 42;的意思是x === undefined。这很有用，因为在 strict mode 之外，undefined 实际上是一个有效的变量名。所以一些 JavaScript 开发人员使用 void 0 而不是 undefined。理论上，您也可以执行 <a href="javascript:undefined">，它与 void(0) 相同。

Answer 15

JavaScript：除了URL;这就是写入更短代码时void无用的地方。

var error1 = false,
    error2 = false,
    error3 = false;

function error1() {

  error1 = true;
}

function myFunction() {

  // You can easily return and call a function at once, if you don't care about myFunction's return value
  if (!someCondition1)
    return error1();

  // What if you want to set a value first?
  if (!someCondition2) {
    error2 = true;
    return
  }

  // Shortest way to return and set a value at once
  if (!someCondition3)
    return void(error3 = true);

  // More code goes here
}

Answer 16

使用javascript.void(0)的另一个例子。我不确定这是否是正确的方法，但做的是

＆＃13;

＆＃13;

$(document).ready(function() {
  jQuery(".show-hide-detail").hide();
  jQuery(".show-hide-detail:first").show();
  jQuery(".show-hide-btn a").click(function() {
    var thid_data = jQuery(this).attr('data-id');
    jQuery(".show-hide-btn a").removeClass('active');
    jQuery(this).addClass('active');
    if (!jQuery("#" + thid_data).is(":visible")) {
      jQuery(".show-hide-detail").hide();
      jQuery("#" + thid_data).show();
    }
  });
});

＆＃13;

<section>
  <div class="features">
    <div class="container">
      <h1>Room Dimensions</h1>
      <p class="description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor arcu non ligula convallis, vel tincidunt ipsum posuere.sollicitudin. Duis iaculis, arcu ut hendrerit pharetra, elit augue pulvinar magna
      </p>
      <div class="dimension-btn show-hide-btn">
        <a class="active" data-id="LivingRoom">Living Room</a>
        <a href="javascript:void(0)" data-id="DiningRoom">Dining Room</a>
        <a href="javascript:void(0)" data-id="Kitchen">Kitchen</a>
        <a href="javascript:void(0)" data-id="MasterBedroom">Master Bedroom</a>
        <a href="javascript:void(0)" data-id="Bedroom2">Bedroom 2</a>
        <a href="javascript:void(0)" data-id="Bedroom3">Bedroom 3</a>
        <a href="javascript:void(0)" data-id="Bathroom">Bathroom</a>
        <a href="javascript:void(0)" data-id="Gym">Gym</a>
        <a href="javascript:void(0)" data-id="SwimmingPool">Swimming Pool</a>
      </div>
      <div class="row">
        <div class="LivingRoom Dimension-detail show-hide-detail" id="LivingRoom" style="display: block;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="DiningRoom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Kitchen" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="MasterBedroom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bedroom2" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bedroom3" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bathroom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="SwimmingPool" style="display: none;"></div>
        </div>
      </div>
    </div>



</section>

＆＃13;

＆＃13;

＆＃13;