asked on

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

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

what's the difference? i know the href="#" is the more standard way nowdays to do it. my problem is i have a standard dropdown menu that expand/collapse 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 isnt acceptable from a user friendly point. If i use href="javascript:expand()" when user clicks expand, the page doesnt 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 doesnt scroll back to the top whenever user clicks expand. thanks.

<html>
<head>
<title> tabletest </title>
<script>
function expand(sec)
{
thisSec = eval('e' + sec);
if (thisSec != null){
if (thisSec.length){
if (thisSec[0].style.display != 'none'){
for (var i=0;i<thisSec.length;i++) {thisSec[i].style.display = 'none'}
}
else{
for (var i=0;i<thisSec.length;i++) {thisSec[i].style.display = 'inline'}
}
}
else{
if (thisSec.style.display != 'none') {thisSec.style.display = 'none'}
else{thisSec.style.display = 'inline'}
}
}

}
</script>

</head>

<body>

<table cellpadding="0" cellspacing="0" width="950" border="0">

<tr>
<td>col1</td>
<td align="right">col2</td>
<td align="right">col3</td>
<td align="right">col4</td>
<td align="right">col5</td>
<td align="right">col6</td>
</tr>

<tr>
<td><a href="javascript:expand(0)"> toggle abbbccaaaaa</a></td>
<td align="right"> 75</td>
<td align="right"> 12</td>
<td align="right"> 325</td>
<td align="right"> 115</td>
<td align="right"> 105</td>
</tr>

<tr id="e0" style="display:none">
<td colspan="99">
<table border="0">
<tr><td>column1</td><td>column2</td></tr>
<tr><td><img src="space.gif" height="1" width="100%"></td></tr>
<tr><td>1</td><td>abadd</td></tr>
<tr><td><img src="space.gif" height="1" width="100%"></td></tr>
<tr><td>5</td><td>cddad</td></tr>
<tr><td><img src="space.gif" height="1" width="100%"></td></tr>
<tr><td>30</td><td>asfddf</td></tr>
<tr><td><img src="space.gif" height="1" width="100%"></td></tr>
</table>
</td>
</tr>
<tr>
<td><a href="javascript:expand(1)">toggle abbbccaaaaa</a></td>
<td align="right"> 75</td>
<td align="right"> 12</td>
<td align="right"> 325</td>
<td align="right"> 115</td>
<td align="right"> 105</td>
</tr>
<tr id="e1" style="display:none">
<td colspan="99">
<table border="0">
<tr><td>column1</td><td>column2</td></tr>
<tr><td><img src="space.gif" height="1" width="100%"></td></tr>
<tr><td>1</td><td>abadd</td></tr>
<tr><td><img src="space.gif" height="1" width="100%"></td></tr>
<tr><td>5</td><td>cddad</td></tr>
<tr><td><img src="space.gif" height="1" width="100%"></td></tr>
<tr><td>30</td><td>asfddf</td></tr>
<tr><td><img src="space.gif" height="1" width="100%"></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>

ASKER CERTIFIED SOLUTION

jaysolomon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

searlas

You can use href and onclick together to provide the same functions
to people who have javascript turned off. e.g.
<a href="some.jsp?expand=1" onclick="expand(); return false;">[+]</a>

If onclick returns false, the browser never even looks at the href attribute, and so it is not followed.
Suppose a user has javascript disabled; in this case the browser ignores the onclick handler
and loads the url given in the href - which in this case is supposed to send back HTML
showing the tab expanded.

So, as jaysolomon says, you must return false if you do not want the browser to follow the href.

The other way of coding it is to ensure the expand function return false, but note, even in this case your onclick handler should include the keyword return:

<script type="text/javascript">
function expand(sec) {
// do your stuff...
return false;
}
</script>

<a href="#" onclick="return expand()">[+]</a>

devic

all say will cause problems, but nobody says what kind of problem :)

jaysolomon

if you have say for example a animated gif in a page and you click the javascript: protocol link the ani will quit running and you have to refresh the page to start again.

you see?

devic

he he jay,

ok i try to explain, how i see this problem:

The problem is that the page stops loading. For exmaple i have some gallery with 30 pictiures on the page and every picture has popup viewBigPic()
and if i click on the first image, and call javascript:viewBigPic() (for example in popup), the main page stops loading...

BUT!
if href=javascript: is for navigation OR submit, then is doesn't matter

jaysolomon

>>BUT!
you may be right BUT! i still do not use the protocol

devic

@ jaysolomon
ok :)

@ gagaliya
for your example, also you can avoid <a>

one style
<style>
.ss{color:blue;text-decoration:underline;cursor:hand;}
</style>

and then all attributes in <td>
<td class=ss onclick=expand(0)>toggle abbbccaaaaa</td>
<td class=ss onclick=expand(1)>toggle abbbccaaaaa</td>

gagaliya

ASKER

oo so that's what return false is for, thanks:)

jaysolomon

glad to have helped thanks
jAy

kgpretty

hi, i'm new to the site. how do i make my own thread?

devic

hi kgpretty,

you can start here:
https://www.experts-exchange.com/Web/Web_Languages/JavaScript/askQuestion.jsp

VINAGAME_SD

I usually use href="javascript:void(0);" onclick="return func()"

Pawel Witkowski

<a href="#" onclick="blabla()">

Makes reload page in OPERA - this is sometimes unwanted behaviour...

laurent_roy

@ devic
your example with <style>...</style> is not very good because it doesn't work if javaScript is disabled. For me, the full answer if the one by searlas. This method is called "hijax" for those who want to find more info about it.

Badotz

Hijacking a link makes it impossible to drag to another window. It also screws with the right-clicking of said link.

Coding JavaScript inside the HTML tag is ugly to boot. Far better to rely on a JavaScript function to handle the "onclick" event than to cripple the anchor tag and uglify your page.

Just try to drag a link from the new EE (Beta) page into a different browse window to see how this DOESN'T WORK.

href=&quot;javascript:func()&quot; vs href=&quot;#&quot; onclick=&quot;javascript:func()&quot;

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