why do developers use href="javascript:;"
e.g.:Content of the A Tag:
<a class="anchor" title="title" href="javascript:;" id="someId">...</a>
The javascript: pseudo-protocol tells the browser that what follows is JavaScript code that should be executed when the link is clicked. What follows in your example is a no-op, and so clicking the link does nothing. Typically this is used when the link isn't being used as a link but rather as a button, where the actual behavior the coder wants is specified by a click handler.
from my experience using, if people use <a href="www.google.com"> I can right click and open it on a new tab. But if it is href=javascript:openLink() I can't open it on a new tab
Good question. Its so that their link doesn't do anything. The developer is probably adding in the javascript function dynamically using Jquery's click event or something similar.
It seems to be a legacy bad habit that people have. They probably want the style of an href but then don't want the functionality of it. You can easily do this without using an href. In a way, they are saying "Here is the value for a link" and then immediately going "ignore the value for my link".
There is a good discussion here:Unobtrusive Javascript
According the the w3schools the value for an href should be a url or a script. When someone does href="javascript:;"
They are using a script that does nothing. They just do it so they can using the styling/tabbing the href offers... which, in my opinion, should be done another way like using css classes.
Also according to the w3schools the tag cannot use certain other attributes if the href is not present, but in HTML5 the tag should only be used for hyperlinks.
Related
I was participating in a special shopping event in a site (www.mi.com/in/) and I tried to view the HTML source through the browser in curious. I was looking for a code of button and I found the href is defined to javascript: void(0) and I thought they might have hidden the link somehow( maybe with some special web language) so nobody can direct go to the link.
So I ask you, is there any present web technology available to hide a link in HTML code when parsing?
screenshot - take a look:
Yes Javascript void(0) means this link will not perform functionality of href.
You can use HTML5 data- attributes and then use jquery to perform javascript operations on clicking of that link
$(document).ready(function(){
$('[data-action=clickElement]').click(function(){alert('the element is clicked')});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0);" data-action='clickElement'>
link
</a>
Expanding on this question,
For items that trigger dialogs and menus (i.e. non navigational), is it good practice to leave out the HREF attribute in links that have events that are hooked up via JavaScript? In these cases, does it makes sense to have HREF there at all?
From this: some text
Or even worse, this: some text (which forces you to use event.preventDefault())
to this: <a>some text</a>
==Edited a little more==
Bad, bad idea. It wont show up as a link for one thing. If you need a button, but are use an <a> as one, just using a <button> or <input type="button">. As you said, "non-navigational". The entire point of <a> is navigational.
Out of those two tho, use href="#" putting javascript:// in a link is worse than adding inline styles.
Pragmatically - this is what I have learned over 16 years of JS
have the href, if not you need to set the cursor to hand or pointer
make the href go to a "sorry you need javascript" page if you do not want to use # or as I learned recently #somethingNotExisting
NEVER have href="javascript:anything()"
return false or preventDefault in the onclick which is preferably set in an onload handler
UPDATE: For menus and such, the agreed markup are lists with css and using links in such menus is recommended if the links actually loads content to gracefully degrade to plain html navigation if script is off
You should use the command element instead.
The command element represents a command that the user can invoke.
HTML5: Edition for Web Authors
This has the benefit of being semantically correct. There's at least one fork of html5shiv which 'enables' support for the element in older browsers.
For example I get this as part of a third-party embed code
<a class="cs_import">Add from Address Book</a>
Not surprisingly "Add from Address Book" does not link to anything...but it is allegedly supposed to. How is this possible and if it is possible for this to be a link..what could be the reason my link is broken?
Yes. It is possible.
Why would someone do it?
Is is being used as a fragment anchor. This is not the case in your example because there is no name attribute. But if it had a name="myfragment" and the page file name was page.html, then page.html#fragment would automatically scroll the browser to that point on the page.
It is being used only for styling purposes. This could be a reason for doing it, but it is not a good reason, because styling can be accomplished either way.
It is being assigned an href attribute programmatically with javascript. For example, I could have a script that selects all the a tags with a specific class and assigns an href based on the text value, such as $("a.cs_import").attr("href",getHref(this.text()));, where getHref(innerText) is a javascript function that gets the URL from the description text. There is almost always a better way to do things than this, but there are some circumstances that warrant it.
It's possible with JavaScript. One could, upon page load, run some JS code that looks for this element and adds an onClick handler to it.
If the link is supposed to be "enhanced" with some javascript code, the third party probably gave you a javascript file to include as well. Be sure you're including that javascript file, and that you're doing it in the right place according to the vendor's instructions.
href is just an attribute of the link tag. You can leave it out but it wouldn't be very semantic (might not even validate). I know that some browsers just show the element but doesn't allow you to click it.
In your case, maybe the link might be enhanced with JS later on. If it doesn't get enhanced, it's pretty much a glorfied span element.
If an '<a>' element does not have a href attribute it is not focusable, and is not included in the tab order for keyboard access. href='#element' works by appending the hash to the current location, and '#' with no anchor identifier works like an id that is not found on the page, ususally by scrolling to the top of the page unless caught and handled.
This question already has answers here:
href="javascript:" vs. href="javascript:void(0)"
(8 answers)
Closed 7 years ago.
I have seen href="javascript:void(0)" and I have seen href="javascript:;" Is there any reason I would not just use href="javascript:" instead?
Edit: Let me make it clear: I am combining this with an onclick and have no objection to using return false if it becomes necessary to use the alternative. Of course this is only if the alternative makes better sense over javascript:.
Also, I have yet to see a answer to my question shown (clearly I think) in the first paragraph. Thanks, david. :)
I have seen href="javascript:void(0)" and I have seen href="javascript:;" Is there any reason I would not just use href="javascript:" instead?
Personally I'd avoid using either. I'd have onclick='return false;' instead, and just set href='#'.
Why? Because if you put Javascript code in the href, then it appears in the browser's status bar when you hover over the link, just like any other URL. It just looks messy.
In fact, since it's going to be ignored anyway, you could put any URL you fancy into the href, not just a hash. The hash is safest, just in case your user has Javascript disabled, but aside from that point, it could be anything.
But I have to point out: having an <a> tag with the href going to a void Javascript code seems to rather defeat the point of having an <a> tag in the first place. I can see how you'd want to enable and disable a link at runtime, but simply setting the href to void does seem somewhat pointless. If it isn't going to be a real link, why not just have a <span> or some other tag. If you must make it look like a link, it's trivial to do that in CSS.
Doesn't answer you question but may shed a bit more light on it, some early versions of browsers like netscape had problems when a script was used within the href.
The void operator was pretty much to only way force the click to do nothing.
Now, with browsers properly implementing "pseudo URLs", you can safely just use javascript:;.
The ideal situation is to not put any code on the element itself, but rather use javascript in either a script tag, or in an external file and bind the event handler there.
It's better not to use either. The href attribute indicates a url. It's better to use event handlers to get the desired behaviour, which is probably the onclick event.
In this case the desired behaviour apparently is to do nothing. Firstly, why use an anchor tag at all when it doesn't link anywhere? Secondly, this can be handles by preventing event bubbling, by letting the onclick event handler return false. Then the href can either point to #, or better even to have it point to a url that more or less has the same effect as the event handler, so it will degrade gracefully when javascript is turned off.
in a code which i am goin through there is a link has href=javascript:; in code.when it is clicked it opens a lightbox to show some msg with close button.how is it done.I think this uses dojo
The code:
..
will actually do nothing. Generally this Nothing link allows some javascript code to use the onclick event instead. The onclick event triggers the window which may be from django or jquery or wherever.
EDITED:
i have just added this link that explane you how dojo work with onlclik event:
Dojo, how to do onclick event on a DIV
ok, just for the sake, all the answer here are good answer, in your particular case if you are using Dojo
the <a href="javascript:;" > simply prevent your <a> tag to jump around when clicked and of course have no action!
probably you have something like this in your code:
<a href="javascript:;" id="some" class="some_too" rel="some_too_too">
Dojo simply keep the <a> id OR class OR rel tags and execute the function!
href="javascript:somefunction();" is just a way to point to a function of some javascript code.
You can also do: href="#" onclick="somefunction();return false;"
Nothing really dojo about it. All it does is call the function or javascript code. It just tells the element to use javascript.
or href="javascript:void(0);" onclick="somefunction();" as stated already.
It's known as the javascript pseudo-protocol. It was designed to replace the contents of the document with a value calculated by JavaScript. It's best not to use it, for several reasons, including:
If JavaScript is disabled, you have a link that goes nowhere
If your JavaScript returns a value, the contents of the page will be replaced by that value
More reasons why you shouldn't use it
<a href="javascript:void(0)" onClick="callFunction();">
Call callFunction() method onClick
this can also be used as foollows
<a href="javascript:callFunction();">
<a href="#" onClick="callFunction();">
this also call javascript callFunction() method but it adds # in your URL to Avoid this Use
<a href="javascript:void(0)" onClick="callFunction();">
I believe this just indicates that your link is going to perform some javascript function. Usually you couple this by hooking up events on the link e.g. OnClick/OnMouseMove
All this does is make a call to a Javascript function which executes some Javascript. Maybe posting the code as an example helps.
Supposedly, it's a URL to a resource that's reachable via the "javascript" protocol, just like you can have "http:" or "ftp:". I don't know if it's an actual standard but most browsers understand that the URL must be fed to the JavaScript interpreter. So, in practice, you can use it to have JavaScript code that's triggered by a link, e.g.:
Say hello
Of course, writing your JavaScript code inside HTML tags is neither clean nor mantainable. But the possibility exists.
What about href="javascript:;"? If you pay close attention, you'll realise that ";" is a JavaScript code snippet that, well, does nothing. That's the point. This is often used to have a link that points nowhere. The main purpose is that clicking on it triggers JavaScript code defined somewhere else (via onclick event handlers).
Last but not least, you often see stuff like onclick="javascript:doStuff()". The onclick HTML attribute expects Javascript code, not a URL. In this situation, the javascript: prefix is totally superfluous. However, the code still runs. It happens to be a label in JavaScript syntax just by chance ;-)