different functions in onclick

Question

im getting confused about the different between those functions on the onclick ?
and which is better ? and what they mean if they are differents .

     onclick =  "return func()"
     onclick =  "return func();"
     onclick =  "javascript: func()"
     onclick =  "javascript: func();"
     onclick =  "func()"
     onclick =  "func();"
     onclick =  "return true"

any explanations will be much appreciated .
and if there is more , would like to know it also

Related, if not dupe: http://stackoverflow.com/questions/11655866/why-is-using-javascript-code-bad/11656104#11656104 — zzzzBov, Sep 18 '12 at 18:38
Out of your first six examples, the pairs are functionally equivalent with the second one just missing a semi-colon on the end. Not illegal and it will work, but it's good style to end with the semi-colon. — j08691, Sep 18 '12 at 18:38

score 2 · Answer 1 · answered Sep 18 '12 at 18:43

Some of them are different but some are the same .

Starting from the first one, onclick = "return func()" means that execute the function, if the return is true then do the click action. I mean that if it is on a link and the return is true then the browser goes to the link , if not then it just ignores the click.

The second one is the same as the first one.

The third one, onclick = "javascript: func()" means just execute the function and don't look into the return. It will process the click action independent from the return. Using this on a link changes the page, and so it won't let the script execute...

The 4th, 5th and the 6th are the same as the 3rd one.

The 7th one has no effect on the execution and just lets the element to behave as it should normally.. If the element is a link then the browser goes to the link..

However if you change the last one to return false then, as you might have guessed, It just ignores the click.

score 2 · Accepted Answer · edited Apr 12 '17 at 07:31

There is no difference between return func() and return func(); The semicolon will be added on the fly if it isn't there. Same obviously goes for the other examples.

return func() invokes func() and returns (the "return" part is a little complicated, but it involves bubbling and it overrides the default behavior for clicks, I believe. Returning true tells the browser to invoke the default behavior (like going to a link's target, for example), and returning false disables the default behavior. I'm not entirely sure what it'll do if it returns anything else.

javascript:func() is (almost) the same as func() -- but it's an outdated way to do it. Don't use this.

func() is almost the same as the others, but it can cause some problems with bubbling and default behavior. Usually, you'll want to specify either return true; or return false;

return true doesn't do much of anything. It just tells the browser "do what you were already going to do." Returning false, on the other hand, would disable default behavior.

In conclusion, the first six will basically do the same thing, the seventh will just invoke the default behavior.

different functions in onclick

2 Answers2