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
How can I disable JavaScript click function if link starts with #?
In JavaScript, you can disable click functionality for links that start with "#" using preventDefault() and CSS selectors. This technique prevents hash links from executing click handlers while allowing normal links to work.
Problem
Sometimes you need to apply click handlers to most links but exclude hash links (href="#") that are used for navigation or placeholder purposes.
Solution Using jQuery
Use the :not() selector to exclude links with href="#" from the click handler:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Hash Link Clicks</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="page1.html">Click me - will show message</a><br><br>
<a href="page2.html">Click me - will also show message</a><br><br>
<a href="#">Hash link - nothing will happen</a><br><br>
<a href="#section">Hash section link - nothing will happen</a>
<script>
$(function(){
$("a:not([href='#'])").click(function(event){
event.preventDefault();
console.log("Link clicked: " + $(this).attr('href'));
alert("You clicked: " + $(this).text());
});
});
</script>
</body>
</html>
Alternative: Disable All Hash Links
To disable any link starting with "#" (including #section, #top, etc.):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable All Hash Links</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="normal-link.html">Normal link - works</a><br><br>
<a href="#">Hash link - disabled</a><br><br>
<a href="#section">Section link - disabled</a><br><br>
<a href="#top">Top link - disabled</a>
<script>
$(function(){
$("a").click(function(event){
let href = $(this).attr('href');
// Check if href starts with #
if (href && href.charAt(0) !== '#') {
event.preventDefault();
console.log("Clicked non-hash link: " + href);
alert("Processing: " + $(this).text());
} else {
console.log("Hash link ignored: " + href);
}
});
});
</script>
</body>
</html>
Vanilla JavaScript Solution
The same functionality without jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vanilla JS Hash Link Control</title>
</head>
<body>
<a href="page.html">Regular link</a><br><br>
<a href="#">Hash link - disabled</a><br><br>
<a href="#content">Content link - disabled</a>
<script>
document.addEventListener('DOMContentLoaded', function() {
let links = document.querySelectorAll('a');
links.forEach(function(link) {
link.addEventListener('click', function(event) {
let href = this.getAttribute('href');
// Process only non-hash links
if (href && !href.startsWith('#')) {
event.preventDefault();
console.log('Clicked: ' + href);
alert('Processing: ' + this.textContent);
}
});
});
});
</script>
</body>
</html>
Key Points
-
:not([href='#'])excludes exact hash matches -
href.startsWith('#')catches all hash-based links -
preventDefault()stops the default link behavior - Hash links remain functional for page navigation when not prevented
Conclusion
Use CSS selectors like :not([href='#']) or JavaScript conditions to selectively disable click handlers for hash links. This approach maintains normal navigation while preventing unwanted click processing.
461 Views
