Trying to run a function from onclick without activating the link

[Carlos Araya]

I have the following link on a web page

<p class="menuitem"><a href="#"
onclick="loadFragment('http://rivendellweb.net/fortress/home',
'index')" title="The Fortress Home">The Fortress Home</a></p>

 

[VK]

I have the following link on a web page

<p class="menuitem"><a href="#"
onclick="loadFragment('http://rivendellweb.net/fortress/home',
'index')" title="The Fortress Home">The Fortress Home</a></p>

<p class="menuitem"
onclick="loadFragment('http://rivendellweb.net/fortress/home',
'index')"
title="The Fortress Home">The Fortress Home</p>

P.S. It is convenient for respondents to see the actual
question/problem in the message body as well, not in the title only.

 

[Randy Webb]

Carlos Araya said the following on 12/25/2006 5:47 PM:

I have the following link on a web page

<p class="menuitem"><a href="#"
onclick="loadFragment('http://rivendellweb.net/fortress/home',
'index')" title="The Fortress Home">The Fortress Home</a></p>

<a href="http://rivendellweb.net/fortress/home"
title="The Fortress Home"
onclick="loadFragment(this.href,'index');alert('ignore VK');return false">
The Fortress Home</a>

The trick to "cancel navigation" is to return false in the event handler.

 

[VK]

Randy Webb wrote:
.... alert('ignore VK') ...

<http://jsnet.sourceforge.net/tmp/irw.html>

 

[Carlos]

Randy:

I tried tagging the ;return false statement at the end of my onclick
handler and it still activates the link. I'm using Firefox 2.0 and
Safari 1.3 to test the page if that makes a difference.

 

[ASM]

Carlos a écrit :

Randy:

I tried tagging the ;return false statement at the end of my onclick
handler and it still activates the link. I'm using Firefox 2.0 and
Safari 1.3 to test the page if that makes a difference.

don't try with refresh button of your navigator
and before to reload verify the url in address bar doesn't finish with '#'

usually return false; aborts link (FF, Safari, IE ... )

 

[Carlos]

I tried it quiting the browser every time and even emptying the cache
on both browsers.

My question is then how can I prevent the link to be activated when
javascript is active? The result I want is to have the javascript
function activated with onclick to load it's content when Javascript is
enabled but the actual href= link to work when it isn't.

Do you have any suggestion?

Carlos

 

[VK]

I tried it quiting the browser every time and even emptying the cache
on both browsers.

My question is then how can I prevent the link to be activated when
javascript is active? The result I want is to have the javascript
function activated with onclick to load it's content when Javascript is
enabled but the actual href= link to work when it isn't.

false has to be returned from the *event handler* for that, as it was
suggested. In case like
<a href="somePage.html" onclick="doSomething(); return false;">Click
me</a>
the (intrinsic) event handler is whatever you have in quotes after
onclick=.

doSomething function may return false, true, nothing or the purpose of
this world - the system couldn't care lesser, the link will be still
followed.

At the same time if you assign a handler pragrammatically like:
document.links[22].onclick = doSomething;
and doSomething returns false it *will* prevent the navigation.

No, UA makers were not on drugs while making it (at least not in this
case , only rather careless of usability.

In the first case you have inline handler right in the tag "onclick"
attribute. On parsing it becomes anonymous function, so say
onclick="doSomething();"
becomes
onclick = function() {
doSomething();
}
This way you can see that no matter what doSomething returns, the
anonymous function itself returns nothing (undefined) so the navigation
is not prevented.
onclick="doSomething(); return false;"
does what expected.

At the same time
linkObject.onclick = doSomething;
directly assign onclick to doSomething, so whatever return value of
doSomething - this is return value of the event handler.

 

[Randy Webb]

VK said the following on 12/27/2006 4:14 PM:

false has to be returned from the *event handler* for that, as it was
suggested.

It does?

<a href="http://www.google.com" onclick="return theAction()">
Don't go to Google
</a>

function theAction(){
return false;
}

 

[VK]

<a href="http://www.google.com" onclick="return theAction()">
Don't go to Google
</a>

function theAction(){
return false;
}

Right, that's the most common. I just wanted to be more "linear" with
the step-by-step explanations.

To OP: the same with form validation:

[WRONG]
function validate(frm) {
// do stuff
// if failed then
return false;
}
....
<form ... onsubmit="validate(this)">

<form ... onsubmit="return validate(this)">

[BUT]
formObject.onsubmit = validate;
// works fine​

 

[Carlos]

VK:

thanks, I added return false to load fragment and that fixed the
problem.

Carlos

I tried it quiting the browser every time and even emptying the cache
on both browsers.

My question is then how can I prevent the link to be activated when
javascript is active? The result I want is to have the javascript
function activated with onclick to load it's content when Javascript is
enabled but the actual href= link to work when it isn't.

false has to be returned from the *event handler* for that, as it was
suggested. In case like
<a href="somePage.html" onclick="doSomething(); return false;">Click
me</a>
the (intrinsic) event handler is whatever you have in quotes after
onclick=.

doSomething function may return false, true, nothing or the purpose of
this world - the system couldn't care lesser, the link will be still
followed.

At the same time if you assign a handler pragrammatically like:
document.links[22].onclick = doSomething;
and doSomething returns false it *will* prevent the navigation.

No, UA makers were not on drugs while making it (at least not in this
case , only rather careless of usability.

In the first case you have inline handler right in the tag "onclick"
attribute. On parsing it becomes anonymous function, so say
onclick="doSomething();"
becomes
onclick = function() {
doSomething();
}
This way you can see that no matter what doSomething returns, the
anonymous function itself returns nothing (undefined) so the navigation
is not prevented.
onclick="doSomething(); return false;"
does what expected.

At the same time
linkObject.onclick = doSomething;
directly assign onclick to doSomething, so whatever return value of
doSomething - this is return value of the event handler.