Html Anchor Tag with Javascript Onclick Event

Html Anchor Tag with Javascript Onclick Event

On using Google I found that they are using onclick events in anchor tags.

In more option in google header part, it looks like normal a tag, but onclicking it doesn't get redirected but opened a menu. Normally when using

<a href='more.php' onclick='show_more_menu()'>More >>></a>

It usually goes to 'more.php' without firing show_more_menu(), but I have show a menu in that page itself. How to do like google?

4 Answers

If your onclick function returns false the default browser behaviour is cancelled. As such:

<a href=' onclick='return check()'>check</a>

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

Either way, whether google does it or not isn't of much importance. It's cleaner to bind your onclick functions within javascript - this way you separate your HTML from other code.

3

You can even try below option:

<a href="javascript:show_more_menu();">More >>></a>
1

From what I understand you do not want to redirect when the link is clicked. You can do :

<a href='javascript:;' onclick='show_more_menu();'>More ></a>
3

Use following code to show menu instead go to href addres

function show_more_menu(e) {
  if( !confirm(`Go to ${e.target.href} ?`) ) e.preventDefault();
}
<a href='more.php' onclick="show_more_menu(event)"> More >>> </a>
1
David Miller
Author

David Miller

David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.