href="javascript:func()" vs href="#" onclick="javascript:func()"

Question

<a href="javascript:expand()">  and <a href="#" onclick="javascript:expand()">

What's the difference?

I know the href="#" is the more standard way nowadays to do it. My problem is I have a standard dropdown menu that expands/collapses when user clicks on toggle.

If I do href="#" for the code below, whenever someone clicks on expand the page ALWAYS scroll right back to the top which isn't acceptable from a user friendly point.

If I use href="javascript:expand()" when user clicks expand, the page doesn't move and everything is OK.

So will there be any problems if I just use href="javascript:expand()" instead? or how do I fix the href="#" so the page doesn't scroll back to the top whenever user clicks expand.

Thanks.

EDIT: I know this question may have been asked before, but i'm looking at it from my point of view. Im just asking for a suggestion rather than an explanation.

Maybe put onclick="return false;" with the href="javascript:expand()" — designtocode, Jul 22 '13 at 09:20
possible duplicate of [JavaScript function in href vs. onclick](http://stackoverflow.com/questions/1070760/javascript-function-in-href-vs-onclick) — fsw, Jul 22 '13 at 09:20
Possible dup http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0 — Kees Sonnema, Jul 22 '13 at 09:20
Note that you do _not_ need the `javascript:` part in the event attribute. Just say `onclick="expand();"` (or `onclick="expand();return false;"` if you want to prevent the page from scrolling/navigating due to the default `href="#"`). — nnnnnn, Jul 22 '13 at 09:30

David Pärsson · Accepted Answer · 2013-07-29T11:09:33.837

3

If your JavaScript onclick event handler returns false, the scrolling won't occur. You can do it like this:

<a href="#" onclick="expand(); return false;">

If your onclick handler does not return false, the href link will be followed. In the case of href="#", that means scroll to the top of the page.

edited Jul 29 '13 at 11:09

answered Jul 22 '13 at 09:20

David Pärsson

6,038
2
37
52

This is wrong. For that to happen, the inline event handler would have to return the return value of `expand()`, which it doesn't – Gareth Jul 22 '13 at 09:28
`javascript:` inside `onclick`? – Mics Jul 22 '13 at 09:33

score 3 · Answer 2 · answered Jul 22 '13 at 09:21

3

The best choice is to not use <a> element. Use any semantically appropriate element or just <div> instead.

answered Jul 22 '13 at 09:21

Roman Pominov

1,403
1
12
17

2

An anchor is better than a div because an anchor is accessible via the keyboard for users who can't use (or who choose not to use) a mouse or other pointing device. – nnnnnn Jul 22 '13 at 09:33
3

Is `` semantically inappropriate? It contradicts with my knowledge. (No offence, real question.) – Mics Jul 22 '13 at 09:36
2

I think `` should be used for real links (for parsers, RSS readers or anything else that don't understand javascript). If you care about keyboard-only users, you could try ` – Roman Pominov Jul 22 '13 at 09:44
2

AFAIK, any element can become accessible from keyboard if it has the proper `tabindex`. Also, good practice is labeling such elements with ARIA `role="button"`. Using `a` elements with fake `href` may be the easiest way, but I doubt that it's the right way because it breaks the user's expectations of the link behavior. – Ilya Streltsyn Jul 22 '13 at 10:24

score 0 · Answer 3 · edited May 23 '17 at 11:57

0

If you want to keep the href="#" you could do

function expand(e) {
  e.preventDefault()
  // ...
}

which prevents the default anchor click behaviour to take place, or you could return false at the end of it.

For the rest, have a look at this question: JavaScript function in href vs. onclick, which I believe is basically what you're asking.

edited May 23 '17 at 11:57

Community

1
1

answered Jul 22 '13 at 09:21

Alberto Zaccagni

30,779
11
72
106

1

This wouldn't work unless the inline `onclick` was updated to actually pass the event object into the function. (And still wouldn't work in all browsers, e.g., not in older IE which doesn't support `preventDefault()`.) – nnnnnn Jul 22 '13 at 09:32
You're right, there are two choices, either handling the even or returning false, depending on the requirements. – Alberto Zaccagni Jul 22 '13 at 09:37

score 0 · Answer 4 · answered Jul 22 '13 at 09:22

0

You should try:

<a href="javascript:void(0);" onclick="expand();">Expand</a>

answered Jul 22 '13 at 09:22

webrama.pl

1,870
1
23
36

score -1 · Answer 5 · answered Jul 22 '13 at 09:24

-1

Try this, insted of href="#" replace this href="javascript:;"

answered Jul 22 '13 at 09:24

Jagan Akash

559
5
26

href="javascript:func()" vs href="#" onclick="javascript:func()"

5 Answers5