If you have done any web development, you have most likely seen
undefined when an anchor tag is clicked, while you are on the page that the
href attribute value is pointing to.
What this means is that if you press, for example, the
undefined. That way nothing will happen and the page will not be refreshed.
Here is how the tag usually looks like:
If a user clicks on the above button, instead of the browser loading a brand new page, nothing will happen. This provides a better user experience.
To see the exact difference, we could create one anchor tag and set the
href value to
<a href="">Link 2</a>
Now if you were to click on
Link 1 nothing will happen, the page will not be refreshed. But if you were to click on
Link 2 your page will get refreshed.
As a next step let’s break the statement down a little bit.
What exactly is
undefined, we have to add the
Next, let’s review what the
void operator is.
What exactly is the
void operator checks the given value and then returns
undefined. In most cases, it is used mostly to obtain the value
undefined by using
As using the
# as the value to your
href tags like this:
The only difference is that this will take you to the top of the page, while
onclick="return false;" so that the user does not get taken to the top of the page:
<a href="#" onclick="return false;">Home</a>
With that approach, you would have the same behavior as you would with
onclick="return false;" approach as an alternative which in some cases might be a bit more readable than using the
As a next step, try to use these methods a few times to see how they actually work and pick the one that suits your needs.
I hope that this post has helped you!