‘#’ vs ‘Javascript:void(0);’ which one is the best attribute for empty links?
I am going to throw some light on these two href
attributes; #
vs Javascript:void(0);
the context in which they can be used, what are the different uses for them, when one is better than the other and finally find out the best href
attribute between the two attributes for empty links.
First of all, I agree that <a href= ‘javascript:void(0);’
is an alternative way of using <a href= ‘#’.
When javascript is used as an alternative; the void (0);
returns undefined, which is a primitive value, this forces the browser to stay on the same page, in short, void(0);
is a short script that evaluates to undefined by default.
Although it isn’t advisable in modern web programming or web design to use the javascript as a link because it tends to cause errors, If anyone bookmarks or links tries opening a link on a new tab, it is inevitable to use them anyway. Using it is a way to give a URL that doesn’t lead anywhere at all. So when the link is clicked, it would not be followed, this case works well but the URL is shown in the status field when the link is pointed at.
When <a href= ‘javascript:void (0)’
is used in the middle of the page, users will try to click on it because looks like a link and most users are used to links in the middle of the pages, It just common for users to click on links they come across unaware of what they could lead them to or what they could cause them in the end, thus resulting in the opening of a new blank page, or javascript error is displayed.
Here is a sample code of how the javascript:void(0)
can work;
<a href= “#” onClick = “return false;”> Something </a>
<a href= “javascript:void(0);”> Something </a>
<a href= “#” id= “a”> Something </a>
<script>
document.getElementById (“a”)
.addEventListener(“click”, function (e) {
e.preventDefault();
return false;
}, false)
</script>
It sensible to use <a href= ‘#’ >
to point to a <div>
that was previously hidden. If a link only points to a script and not a link. No user would want to be scrolled back to the top of the page simply because he or she clicked on a link in the middle of the page which <a href= ‘#’>
does.
So if you are going to use the <a hreft= ‘#’>
instead of <a hreft= ‘javascript:void(0);’
to prevent its default behavior of scrolling to the top of the page, or wherever it is that the ‘#’
is pointing to, then it is paramount to use return false on the function “onClick
event.
For example;
<a href= “#” onClick= “return false;”> Something </a>
OR
<script>
Document.getElementById(“link”). addEventListener(“click”, function() {
return false;
</script>
On the other hand in using javascript:void(0)
, it causes the operator in javascript in navigation to return the value of the executed scripts as a new content and will be displayed in the browser.
From here comes the void()
function, the void takes over from there and causes the expression which returns to null, similar to a function without return statement; only returns undefined, thus the ability to inject a code into the href attributes of the <a>
tag. Thence users are able to run the code without the browser having to run the code to replace the current page.
A “#”
is used within a link only species on html element id in which the window should be scrolled. It is also essential if not a requirement to note that for links that don’t go anywhere, it is prudent not to use an <a>
element, instead use a <div>
, <span>
or any other element that acts as container, and on the CSS, use :hover to style it appropriately.
The difference
The href= “”
will only load the current page, while href= “#”
scrolls the current page to the top, while href= ‘javascript:void(0)’
will do nothing at all. The same effects of javascript:void(0)
are realized by returning false from the click event handler of the <a>
tag with either of the two methods. I would prefer to use <a id= “link” href= “#”>
Link </a>
, then bind an event handler to the click listener.
For example;
Document.getElementById(“the link”).onClick = function() {
//Do something
};
This way, it allows for the use of “#”
even if javascript is disabled, the page won’t reload, then the “#”
will just scroll up to the top. That is why I am of the opinion that “#”
is a lot more cleaner than javascript:void(0);
On the other hand using anchor tag <a href= ”#”>
Link, the hyperlinks will entice visitors to click on them expecting to be landed in to a new page or at the top of the web page in the same web page.
To draw some conclusions I would say both hyperlinks have its own special cases where one is better than the other and vice versa. There are also instances where both can perform the same duties in the
same manner apart from the difference that the javascript:void(0)
might take a longer time to load on the page than the <a href= “#” >
hyperlink.
Conclusion
Use <a href= ‘#’ > Link</a>
when you want the link to navigate to the top of the page. Use the Javascript:void(0);
when you want the page to refresh without opening on a new tab but ensure the event listener returns false on the function for it to evaluate the undefined to work, otherwise, it will encounter an error.