HTML anchor tag with Javascript onclick event

Question

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?

score 158 · Accepted Answer · edited Apr 24 '13 at 17:19

158

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.

edited Apr 24 '13 at 17:19

Seeta Somagani

776
1
11
31

answered Sep 08 '11 at 12:13

TJHeuvel

12,403
4
37
46

5

1. To be more sure, use a # in href="#" and do the necessary things within the javascript. It is safe to click on that link with # href; the page does leave/reload url. – Bimal Poudel Jan 21 '15 at 07:50
10

Follow the above advice with caution, as HTML5 rules explicitly state that `href="#"` is supposed to navigate to the top of the page. You can simply add the `href` attibute without content, and get the click behaviour. Assinging `#` as url for real pages (Rather than single-page 100% height apps) is generally a bad idea. – Mike 'Pomax' Kamermans Oct 18 '18 at 21:51
Just a note, in the same way you bind a CSS class to an element and then specify the detailed styles in a separate CSS file, it is perfectly good to bind an inline event handler *function* to an element, and then specify the detailed implementation of that function in a separate JS file. Your HTML file is where you declare the structure, appearance, as well as behavior of your webpage. The detailed implementations reside elsewhere. That's the kind of separation you really want. – Sarsaparilla Dec 24 '20 at 04:16
can the function chack pass variable? eg check('123') – Han Whiteking Mar 22 '23 at 11:46

score 65 · Answer 2 · answered Oct 05 '12 at 17:27

65

You can even try below option:

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

answered Oct 05 '12 at 17:27

sun2

1,118
1
13
17

2

Warning: If the function returns any explicit value (ex: `return null;`, but not `return;`), this will have unintended consequences in some browsers, such as FireFox. The page will have all content replaced with the returned value in string format (ex: `[object Object]`). – rannmann Nov 02 '16 at 22:52

score 59 · Answer 3 · edited Oct 17 '22 at 15:01

59

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>

edited Oct 17 '22 at 15:01

Uwe Keim

39,551
56
175
291

answered Sep 08 '11 at 12:16

Aditya Manohar

2,204
1
17
20

3

This is helpful when you don't want the href to point anywhere. – kbpontius Jun 15 '17 at 23:56
It is cool and It works but jquery throws an error "Error: Syntax error, unrecognized expression: javascript:;" – TheOddCoder Oct 17 '17 at 13:22
I am using jQuery version 1.10.2, and I do not get the syntax error that @TheOddCoder experienced. – Mike Finch Oct 30 '20 at 00:03

Kamil Kiełczewski · Answer 4 · 2019-11-04T13:16:01.140

9

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>

edited Nov 04 '19 at 13:16

answered Jul 02 '18 at 08:30

Kamil Kiełczewski

85,173
29
368
345

This did the trick thank you – Uriahs Victor Sep 28 '21 at 23:48
Is there a spec somewhere that spells out why `event` magically works, but `evt` does not? – James Irwin Aug 04 '22 at 22:12
@JamesIrwin in my code I not use `event` - I think you can create new question in stack-overflow and ask – Kamil Kiełczewski Aug 06 '22 at 11:15

score 2 · Answer 5 · answered Aug 29 '22 at 11:50

2

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;'>

answered Aug 29 '22 at 11:50

Nandha

192
1
2
11

score 0 · Answer 6 · answered Jul 20 '22 at 04:39

0

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

answered Jul 20 '22 at 04:39

Sandeep Jain

1,019
9
13

1

Please read [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). While this code block may answer the OP's question, this answer would be much more useful if you explain how this code is different from the code in the question, what you've changed, why you've changed it and why that solves the problem without introducing others. - [From Review](https://stackoverflow.com/review/low-quality-posts/32238228) – Saeed Zhiany Jul 20 '22 at 05:05

score 0 · Answer 7 · answered Apr 11 '23 at 19:59

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>

HTML anchor tag with Javascript onclick event

7 Answers7

Linked

Related