What does the following code mean -
<a href="javacsript:;" onClick="addItem(160)">some link</a>
My basic doubt is which script is run when we click on the link
views:
110answers:
5
+2
A:
The onclick will run first. If onclick doesn't return false (in this case it doesn't), then href will be processed.
Matt
2010-06-05 05:39:59
and what script will be called when the href is processed?
ayush
2010-06-05 05:41:16
In your example, the inline JavaScript (`javascript:;`) will be processed. If href was a regular URL, the browser would just navigate to it.
Matt
2010-06-05 05:42:12
Nothing. The author is probably thinks that this is a good way to prevent the anchor from pushing to another page if the onclick doesn't return false. You'll also see javascript:void() a lot. It's actually best to ensure the onclick event returns false and, if it doesn't, make sure the href pushes to a fallback of some sort. Or, don't use the anchor tag at all.
Andrew
2010-06-05 05:45:15
the name of that inline javascript is "javascript"? I mean what exact script would be called ?
ayush
2010-06-05 05:46:00
the `href="javascript:;"` is a non-operation. it is an empty javascript call.
Matt
2010-06-05 05:46:42
so if the function "addItem" return true then nothing would happen. What if false is returned?
ayush
2010-06-05 05:48:59
Actually it doesn't matter what `addItem` returns in your example. If it were `onclick="return addItem(160)"` THEN `addItem`'s return value would have an effect on whether or not `href` is processed.
Matt
2010-06-05 05:51:11
That particular "javascript:" URL is a no-op, but they're not necessarily no-ops!! See what happens if you call a function that returns a value!
Pointy
2010-06-05 11:57:06
A:
your doubt is true !, you must find "function addItem(x)" in a javascript file that linked by script tag from the page.(usually in head tag)
sirvan
2010-06-05 05:42:22
the function addItem is there in one of the script files. my doubt is though that what would happen if addItem return false?
ayush
2010-06-05 05:51:56
A:
The "javascript:" inside href is a way to tell the browser to execute javascript instead of going to a different page.
This line, for example will show a message box with "testing" message.
<a href="javascript:alert('testing');">Click me</a>
and this one will execute an empty javascript statement that will do nothing
<a href="javacsript:;">Click me</a>
The onclick is an event that also fires when a link is clicked. In contrast to href it does not allow you to put in a link to a different page; it accepts only javascript.
Browsers will first fire onclick event and then process href attribute. If it's an URL (empty href means current URL; click will just refresh the page) it will follow it, if it's javascript it will execute it.
Putting "javascript:;" or "javascript:void(null);" inside href is old and wrong technique to ensure browser does not not refresh the page after onclick is processed.
To answer your question; both scripts will execute, but the href script will do nothing.
Luc
2010-06-05 06:08:59
Not so simple as that, @Luc!! See what happens if the script actually returns a value!
Pointy
2010-06-05 11:57:56
+1
A:
The javascript part in the href attribute is the protocol (you know, like http, ftp or mailto). What it does is it tells the browser that the URL is actually JavaScript code.
Normally, when you click on a link, the browser will execute whatever it finds in the href attribute. However, the browser will also trigger the onclick event before it handles the href thing. So, setting an onclick handler will override the normal behavior.
Thus, the event handler becomes king and it has the possibility to allow or prevent the default browser behavior by returning true (allow) or false (prevent).
So, in your example, when you click on that link, the browser will trigger addItem. If it returns false, nothing happens. If it returns true, the browser will execute the code in the href attribute. But since it finds no statement in there (i.e. empty statement), nothing happens.
Try the following code:
<a href="http://google.com/" onclick="return false;">won't go to google.com</a>
<a href="http://google.com/" onclick="return true;">will go to google.com</a>Does that make sense to you?
Oblio
2010-06-05 08:56:36
A:
Note that when the browser interprets the "javascript:" value of an "href", if the return value is not empty then it is interpreted as the document content desired for the <a> tag! Here is a test page for you to enjoy:
http://gutfullofbeer.net/jslink.html
The source for that page (look at it; it's really short) includes the following link:
<a href='javascript:getLink()'>Click to go there!</a>
The function "getLink()" is defined as follows:
function getLink() {
var sel = document.getElementById('sel');
return sel.options[sel.selectedIndex].value;
}
As you see, the function grabs the current selected value of the <select> element on the page and returns that. What does the <select> element look like?
<select id='sel'>
<option value='<html><head><meta http-equiv="refresh" content="2;http://cnn.com"/></head><body>Redirecting to CNN ...</body></html>'>CNN</option>
<option value='<html><head><meta http-equiv="refresh" content="2;http://zombo.com"/><head><body>Redirecting to Zombocom ...</body></html>'>Zombocom</option>
<option value='<html><head><meta http-equiv="refresh" content="2;http://reddit.com"/></head><body>Redirecting to Reddit ...</body></html>'>Reddit</option>
</select>
The values of those options are complete HTML markup for a page with a redirect to the requested site. Because the URL returns a value, that value is understood by the browser to be the new page content.
It's pretty mind-blowing. I'm not sure why you'd ever do this.
Pointy
2010-06-05 11:48:58