Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Which one is better to use for a JavaScript link, "#" or "javascript:void(0)"?
When creating JavaScript links that don't navigate to another page, developers often choose between "#" and "javascript:void(0)". Both prevent default navigation, but they behave differently and have distinct use cases.
Understanding the Difference
The "#" anchor creates a link to the top of the current page and adds a hash to the URL, while "javascript:void(0)" executes JavaScript that returns undefined, preventing any navigation without affecting the URL.
Using "#" Hash Links
The hash symbol creates an anchor link that jumps to the top of the page if no element with that ID exists:
<!DOCTYPE html>
<html>
<head>
<title>Hash Link Example</title>
</head>
<body>
<h1>Page Content</h1>
<p>Some content here...</p>
<br><br><br><br><br><br><br><br><br><br>
<a href="#" onclick="alert('Clicked with hash'); return false;">
Click me (hash link)
</a>
</body>
</html>
Using javascript:void(0)
The void operator evaluates an expression and returns undefined, preventing any navigation behavior:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript void(0) Example</title>
</head>
<body>
<h1>Page Content</h1>
<p>Some content here...</p>
<br><br><br><br><br><br><br><br><br><br>
<a href="javascript:void(0)" onclick="alert('Clicked with void(0)')">
Click me (void link)
</a>
</body>
</html>
Practical Example with Double-Click
Here's how javascript:void(0) works with event handlers without affecting page navigation:
<!DOCTYPE html>
<html>
<head>
<title>Understanding JavaScript void(0)</title>
</head>
<body>
<a href="javascript:void(0);" ondblclick="alert('Click it twice!')">
Click me not once, but twice.
</a>
</body>
</html>
Comparison
| Aspect | "#" | "javascript:void(0)" |
|---|---|---|
| URL Change | Adds # to URL | No URL change |
| Page Jump | Jumps to top if no preventDefault | No page movement |
| Performance | Slightly faster | Minimal overhead |
| SEO Impact | None | None |
Modern Best Practice
For modern JavaScript applications, consider using href="#" with event.preventDefault() in your click handler, or better yet, use proper button elements for non-navigation interactions:
<!DOCTYPE html>
<html>
<head>
<title>Modern Approach</title>
</head>
<body>
<!-- Better approach for non-navigation actions -->
<button type="button" onclick="alert('This is better for actions')">
Click me (button)
</button>
<!-- If you must use a link -->
<a href="#" onclick="alert('Prevented default'); return false;">
Link with preventDefault
</a>
</body>
</html>
Conclusion
While javascript:void(0) prevents URL changes and page jumps, modern development favors using appropriate HTML elements like buttons for actions, or href="#" with preventDefault() for links that perform JavaScript operations.
239 Views
