Including both href and onclick to HTML <a> tag

Best practices: managing onclick and href

The golden rule: Keep JavaScript out of HTML

In-line JavaScript, while convenient, is often frowned upon due to its disorganization. Instead, you can bind a click event listener to your <a> tag using document.querySelector or document.getElementById for more readability and maintainability:

document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelector('a#myLink').addEventListener('click', (e) => {
        /* Avoids morning traffic (href navigation) until you finish coffee (custom logic)! */
        e.preventDefault();
        doSomething();
    });
});


Walking the semantics tightrope: choosing between <a> and <button>

Consider using a <button> when the click action doesn't lead to navigation. Style your button to look like a link for a seamless user experience:

<button onclick="doSomething()" class="link-button">Click me</button>


Your stylesheet becomes a costume designer, dressing button as a pseudo-<a> tag.

Manual navigation: commandeer href after onclick

You can prioritize onclick over href, but still take a scenic route to href after onclick by manipulating window.location:

<a href="http://example.com" onclick="doCustomLogicFirst(event);">Click me</a>

<script>
function doCustomLogicFirst(event) {
    /* The href vacation can wait until we finish onclick work */
    event.preventDefault();
    console.log('Custom logic first, beach later!');
    window.location.href = event.target.href;
}
</script>


Now, you're the captain piloting the navigation after your custom logic!

The jQuery shortcut

Using jQuery, managing click events becomes a piece of cake. 🍰

$('a#myLink').on('click', function(e) {
    /* We waved the DOM traffic goodbye! */
    e.preventDefault();
    // Your logic here
});


jQuery is indeed the Swiss Army Knife of JavaScript, simplifying event management significantly.

For all occasions: dealing with edge cases

Resolving the mystery of "#"

Implement href="#" as a placeholder cautiously as it may teleport the user to the top of the page. It's the elevator's "Open door" button of the web. Remember to prevent its default action:

<a href="#" onclick="event.preventDefault(); doSomething();">Click me</a>


Accessibility first: empty hrefs

Links with a void href like href="#" or href="javascript:void(0)" can perplex assistive technologies and users alike. Use button for non-navigating actions to promote accessibility.

The evolution of <a>: staying in the loop

Brush up on the best practices on <a> elements and onClick events by bookmarking resources like MDN. Staying informed ensures your HTML navigates smoothly with the changing tides.