Javascript: void%200 实际作用是什么？解析<a href="javascript:void%200;">的功能

Hey there! Let me break this down for you clearly—this is a classic web dev pattern that’s been around for ages, so it’s totally normal to wonder about it.

What does javascript:void 0 actually do? #

First, let’s look at the JavaScript part. The void operator in JS has one core job: it executes the expression that follows it, then returns undefined, no matter what the expression evaluates to.

So void 0 is just a quick, rock-solid way to get the genuine undefined value. You might be thinking, "Why not just write undefined directly?" Back in the day (think old versions of IE), undefined wasn’t a protected keyword—you could actually reassign it to something silly like let undefined = "oops", which would break code relying on it being the real undefined. void 0 avoids that problem because it will always return the true undefined, no matter what.

Nowadays, modern browsers lock down undefined so it can’t be redefined, but this syntax is still widely used out of habit and for compatibility with older codebases.

What’s the point of <a href="javascript:void 0;">? #

Normal <a> tags have a built-in default behavior: click them, and they’ll navigate to the URL in their href attribute. For example:

• <a href="#">Click me</a>: This jumps straight to the top of the page (since # targets the top-level anchor)
• <a href="">Click me</a>: This might refresh the page depending on the browser

When you use javascript:void 0 as the href, here’s what plays out:

1. The browser tries to execute the JavaScript code in the href
2. That code returns undefined
3. Browsers treat a return value of undefined from a javascript: URL as a signal to skip the default navigation behavior entirely

In short: clicking this link won’t jump anywhere, won’t refresh the page, and won’t scroll to the top. It’s a way to turn an <a> tag into a "neutral" clickable element, perfect when you want to attach your own custom behavior (like an onclick event) without the browser getting in the way.

For example:

<a href="javascript:void 0;" onclick="openSettingsPanel()">Open Settings</a>

Clicking this will run openSettingsPanel() but won’t trigger any default link navigation.

Modern alternatives #

These days, there are cleaner, more semantic ways to achieve the same result without using javascript:void 0:

• Use a <button> element instead (it’s designed for interactive actions, which is more semantically correct than repurposing a link)
• Add href="#" to the <a> tag and call event.preventDefault() in your click handler to stop the default jump:

  <a href="#" onclick="event.preventDefault(); openSettingsPanel()">Open Settings</a>
  

But javascript:void 0 is still a common sight in legacy code and quick prototypes, so it’s good to have this context!

内容的提问来源于stack exchange，提问作者Giannis