Categories
JavaScript Answers

How to prevent reload with link onclick without “#”?

Spread the love

Sometimes, we want to prevent reload with link onclick without "#".

In this article, we’ll look at how to prevent reload with link onclick without "#".

How to prevent reload with link onclick without "#"?

To prevent reload with link onclick without "#", we can call e.preventDefault inside the click event handler.

For instance, we write:

<a href=''>click me</a>

to add a link.

Then we write:

const a = document.querySelector('a')
a.onclick = (e) => {
  e.preventDefault()
  console.log('clicked')
}

to select the link with querySelector.

Next, we set a.onclick to a function that calls e.preventDefault to stop the default behavior, which is to refresh the page.

Therefore, when we click on the link, we see 'clicked' logged.

Conclusion

To prevent reload with link onclick without "#", we can call e.preventDefault inside the click event handler.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *