hyperlink - HTML anchor tag with Javascript onclick event - Stack Overflow

admin管理员组

文章数量:1134035

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?

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?

• javascript
• hyperlink
• onclick
• anchor

Share Improve this question Follow edited Jun 4, 2013 at 17:08 Sachin Jain 21.8k3434 gold badges110110 silver badges176176 bronze badges asked Sep 8, 2011 at 12:11 smartkidsmartkid 1,54944 gold badges1414 silver badges2323 bronze badges

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 165

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

<a href='http://www.google.com' 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.

You can even try below option:

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

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>

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>

One more solution that prevents default action even if the javascript function returns any value.

<a href="www.any-website.com" onclick='functionToRun();return false;'>

1) Link to work
<a href="#" onClick={this.setActiveTab}>
      ...View Full List
                    </a>
  setActiveTab = (e) => {
    e.preventDefault();
    console.log(e.target);
}

Not sure if this is what you are looking for but you can recreate an anchor tag with a div adding role="link", this doesn't have the href but at the same time it should be fine from a SEO point of view

<div tabindex="0" role="link" aria-label="Example Link" onclick="show_more_menu()">
  Click to navigate
</div>

本文标签： hyperlinkHTML anchor tag with Javascript onclick eventStack Overflow