The “href JavaScript void” is a commonly used technique in web development, but it has become less prevalent in recent years. It involves setting the href attribute of an HTML anchor (<a>) element to "javascript:void(0)" to create a link that doesn’t perform any default action when clicked.
The purpose of using href="javascript:void(0)" is to attach a JavaScript event handler to the link, allowing custom actions to be executed instead of the default navigation behavior.
The syntax for using href="javascript:void(0)" in an HTML anchor (<a>) element is straightforward. Here’s the syntax:
<a href="javascript:void(0)">Link text</a>
The href attribute in HTML is used to specify the URL or location that a hyperlink should point to. The value of the href attribute can be a web address, a file path, or even a JavaScript command.
When using href="javascript:void(0)", it is a common practice to create a hyperlink that doesn’t perform any action when clicked. The void(0) JavaScript expression is used to produce a value of undefined, effectively preventing the browser from navigating to a new page or performing any other default action.
href JavaScript void example
Simple example code.
<!DOCTYPE html>
<html>
<head>
<title>Void Href Example</title>
</head>
<body>
<a href="javascript:void(0)" onclick="myFunction()">Click me</a>
<script>
function myFunction() {
console.log("Link clicked!");
// Perform custom action here
}
</script>
</body>
</html>
Output:
However, modern web development practices tend to favor using event listeners and JavaScript frameworks to handle user interactions and modify the page dynamically, rather than relying on href attributes with JavaScript code.
Therefore, the recommended approach nowadays is to use event listeners and separate JavaScript code from HTML for better code organization, maintainability, and adherence to best practices.
Do comment if you have any doubts or suggestions on this Js void topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version