Which href value should I use for JavaScript links or javascript void 0

Question

The following are two methods of building a link that has the sole purpose of running JavaScript code  Which is better  in terms of functionality  page load speed  validation purposes  etc     x000D   x000D  function myJsFunc     x000D      alert  myJsFunc    x000D    x000D   lt a href     onclick  myJsFunc     gt Run JavaScript Code lt  a gt  x000D   x000D   x000D    or   x000D   x000D  function myJsFunc     x000D      alert  myJsFunc    x000D    x000D    lt a href  javascript void 0   onclick  myJsFunc     gt Run JavaScript Code lt  a gt  x000D   x000D   x000D

User · Answer

I usually go for   lt a href  javascript    onclick  yourFunction    gt Link description lt  a gt    It s shorter than javascript void 0  and does the same

User · Answer

is better than javascript anything  but the following is even better   HTML    lt a href   gracefully degrading url with same functionality ext  class  some-selector  gt For great justice lt  a gt    JavaScript     function             some-selector   click myJsFunc         You should always strive for graceful degradation  in the event that the user doesn t have JavaScript enabled   and when it is with specs  and budget    Also  it is considered bad form to use JavaScript attributes and protocol directly in HTML

User · Answer

Usually  you should always have a fall back link to make sure that clients with JavaScript disabled still has some functionality  This concept is called unobtrusive JavaScript    Example    Let s say you have the following search link    lt a href  search php  id  searchLink  gt Search lt  a gt    You can always do the following   var link   document getElementById  searchLink     link onclick   function         try              Do Stuff Here               finally           return false             That way  people with JavaScript disabled are directed to search php while your viewers with JavaScript view your enhanced functionality

User · Answer

Ideally you should have a real URL as fallback for non-JavaScript users   If this doesn t make sense  use   as the href attribute   I don t like using the onclick attribute since it embeds JavaScript directly in the HTML   A better idea would be to use an external JS file and then add the event handler to that link   You can then prevent the default event so that the URL doesn t change to append the   after the user clicks it

User · Answer

Unless you re writing out the link using JavaScript  so that you know it s enabled in the browser   you should ideally be providing a proper link for people who are browsing with JavaScript disabled and then prevent the default action of the link in your onclick event handler  This way those with JavaScript enabled will run the function and those with JavaScript disabled will jump to an appropriate page  or location within the same page  rather than just clicking on the link and having nothing happen

User · Answer

I choose use javascript void 0   because use this could prevent right click to open the content menu  But javascript   is shorter and does the same thing

User · Answer

Doing  lt a href     onclick  myJsFunc     gt Link lt  a gt  or  lt a href  javascript void 0   onclick  myJsFunc     gt Link lt  a gt  or whatever else that contains an onclick attribute - was okay back five years ago  though now it can be a bad practice  Here s why    It promotes the practice of obtrusive JavaScript - which has turned out to be difficult to maintain and difficult to scale  More on this in Unobtrusive JavaScript  You re spending your time writing incredibly overly verbose code - which has very little  if any  benefit to your codebase  There are now better  easier  and more maintainable and scalable ways of accomplishing the desired result    The unobtrusive JavaScript way  Just don t have a href attribute at all  Any good CSS reset would take care of the missing default cursor style  so that is a non-issue  Then attach your JavaScript functionality using graceful and unobtrusive  best practices - which are more maintainable as your JavaScript logic stays in JavaScript  instead of in your markup - which is essential when you start developing large scale JavaScript applications which require your logic to be split up into blackboxed components and templates  More on this in Large-scale JavaScript Application Architecture  Simple code example   x000D   x000D     Cancel click event x000D      cancel-action   click function    x000D      alert  Cancel action occurs     x000D      x000D   x000D     Hover shim for Internet Explorer 6 and Internet Explorer 7  x000D    document body  on  hover   a  function    x000D        this  toggleClass  hover    x000D      x000D  a   cursor  pointer  color  blue    x000D  a hover a hover   text-decoration  underline    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt a class  cancel-action  gt Cancel this action lt  a gt  x000D   x000D   x000D        A blackboxed Backbone js example  For a scalable  blackboxed  Backbone js component example - see this working jsfiddle example here  Notice how we utilize unobtrusive JavaScript practices  and in a tiny amount of code have a component that can be repeated across the page multiple times without side-effects or conflicts between the different component instances  Amazing   Notes   Omitting the href attribute on the a element will cause the element to not be accessible using tab key navigation  If you wish for those elements to be accessible via the tab key  you can set the tabindex attribute  or use button elements instead  You can easily style button elements to look like normal links as mentioned in Tracker1 s answer  Omitting the href attribute on the a element will cause Internet nbsp Explorer nbsp 6 and Internet nbsp Explorer nbsp 7 to not take on the a hover styling  which is why we have added a simple JavaScript shim to accomplish this via a hover instead  Which is perfectly okay  as if you don t have a href attribute and no graceful degradation then your link won t work anyway - and you ll have bigger issues to worry about  If you want your action to still work with JavaScript disabled  then using an a element with a href attribute that goes to some URL that will perform the action manually instead of via an Ajax request or whatever should be the way to go  If you are doing this  then you want to ensure you do an event preventDefault   on your click call to make sure when the button is clicked it does not follow the link  This option is called graceful degradation

User · Answer

I agree with suggestions elsewhere stating that you should use regular URL in href attribute  then call some JavaScript function in onclick  The flaw is  that they automaticaly add return false after the call   The problem with this approach is  that if the function will not work or if there will be any problem  the link will become unclickable  Onclick event will always return false  so the normal URL will not be called   There s very simple solution  Let function return true if it works correctly  Then use the returned value to determine if the click should be cancelled or not   JavaScript  function doSomething         alert   you clicked on the link         return true      HTML   lt a href  path to some url  onclick  return  doSomething     gt link text lt  a gt      Note  that I negate the result of the doSomething   function  If it works  it will return true  so it will be negated  false  and the path to some URL will not be called  If the function will return false  for example  the browser doesn t support something used within the function or anything else goes wrong   it is negated to true and the path to some URL is called

User · Answer

There is one more important thing to remember here  Section 508 compliance  Because of it  I feel it s necessary to point out that you need the anchor tag for screen readers such as JAWS to be able to focus it through tabbing  So the solution  just use JavaScript and forget the anchor to begin with  is not an option for some of this  Firing the JavaScript inside the href is only necessary if you can t afford for the screen to jump back up to the top  You can use a settimeout for 0 seconds and have JavaScript fire to where you need focus but even the apage will jump to the top and then back

User · Answer

Javascript  void 0   is void to null value  Not assigned   which that mean your browser is going to NULL click to DOM  and window return to false      The     is not follow the DOM or Window in javascript  which that mean the     sign inside anchor href is a LINK  Link to the same current direction

User · Answer

I recommend using a  lt button gt  element instead  especially if the control is supposed to produce a change in the data   Something like a POST    It s even better if you inject the elements unobtrusively  a type of progressive enhancement   See this comment

User · Answer

You could use the href and remove all links that have only hashes   HTML    lt a href     onclick  run foo    gt  foo  lt  a gt    JS     document  ready function               on DOM ready or some other event        a href      attr  href             set all reference handles to blank strings                                           for anchors that have only hashes

User · Answer

Just to pick up the point some of the other have mentioned   It s much better to bind the event  onload a or    document   ready    then to put JavaScript directly into the click event   In the case that JavaScript isn t available  I would use a href to the current URL  and perhaps an anchor to the position of the link  The page is still be usable for the people without JavaScript those who have won t notice any difference   As I have it to hand  here is some jQuery which might help   var  functionName    function           do something     jQuery   link id or other selector    bind  click    functionName

User · Answer

Edited on 2019 January  In HTML5  using an a element without an href attribute is valid  It is considered to be a  placeholder hyperlink      If the a element has no href attribute  then the element represents a placeholder for where a link might otherwise have been placed  if it had been relevant  consisting of just the element s contents    Example    lt a gt previous lt  a gt    If after that you want to do otherwise    1 - If your link doesn t go anywhere  don t use an  lt a gt  element  Use a  lt span gt  or something else appropriate and add CSS  hover to style it as you wish   2 - Use the javascript void 0  OR javascript undefined OR javascript   if you want to be raw  precise and fast

User · Answer

I strongly prefer to keep my JavaScript out of my HTML markup as much as possible  If I m using  lt a gt  as click event handlers then I d recommend using  lt a class  trigger  href     gt Click me  lt  a gt        trigger   click function  e        e preventDefault           Do stuff          It s very important to note that many developers out there believe that using anchor tags for click-event handlers isn t good  They d prefer you to use a  lt span gt  or  lt div gt  with some CSS that adds cursor  pointer  to it  This is a matter if much debate

User · Answer

Neither     If you can have an actual URL that makes sense use that as the HREF   The onclick won t fire if someone middle-clicks on your link to open a new tab or if they have JavaScript disabled   If that is not possible  then you should at least inject the anchor tag into the document with JavaScript and the appropriate click event handlers     I realize this isn t always possible  but in my opinion it should be striven for in developing any public website   Check out Unobtrusive JavaScript and Progressive enhancement  both Wikipedia

User · Answer

When I ve got several faux-links  I prefer to give them a class of  no-link    Then in jQuery  I add the following code     function           no-link   click function e          e preventDefault                 And for the HTML  the link is simply   lt a href     class  no-link  gt Faux-Link lt  a gt    I don t like using Hash-Tags unless they re used for anchors  and I only do the above when I ve got more than two faux-links  otherwise I go with javascript void 0     lt a href  javascript void 0   class  no-link  gt Faux-Link lt  a gt    Typically  I like to just avoid using a link at all and just wrap something around in a span and use that as a way to active some JavaScript code  like a pop-up or a content-reveal

User · Answer

Why not using this  This doesn t scroll page up    lt span role  button  onclick  myJsFunc     gt Run JavaScript Code lt  span gt

User · Answer

The most simple and used by everyone mostly is javascript void 0  You can use it instead of using   to stop  tag redirect to header section    lt a href  javascript void 0   onclick  testFunction     gt Click To check Function lt  a gt   function testFunction         alert  hello world

User · Answer

I believe you are presenting a false dichotomy  These are not the only two options    I agree with Mr  D4V360 who suggested that  even though you are using the anchor tag  you do not truly have an anchor here  All you have is a special section of a document that should behave slightly different  A  lt span gt  tag is far more appropriate

User · Answer

It s nice to have your site be accessible by users with JavaScript disabled  in which case the href points to a page that performs the same action as the JavaScript being executed  Otherwise I use     with a  return false   to prevent the default action  scroll to top of the page  as others have mentioned   Googling for  javascript void 0   provides a lot of information on this topic  Some of them  like this one mention reasons to NOT use void 0

User · Answer

If you are using an  lt a gt  element  just use this    lt a href  javascript myJSFunc       gt myLink lt  a gt    Personally I d attach an event handler with JavaScript later on instead  using attachEvent or addEventListener or maybe  lt put your favorite JavaScript framework here  gt  also

User · Answer

If you use a link as a way to just execute some JavaScript code  instead of using a span like D4V360 greatly suggested   just do    lt a href  javascript  function   7Balert  22test 22  3B 7D    3B  gt test lt  a gt    If you re using a link with onclick for navigation  don t use href     as the fallback when JavaScript is off  It s usually very annoying when the user clicks on the link  Instead  provide the same link the onclick handler would provide if possible  If you can t do that  skip the onclick and just use a JavaScript URI in the href

User · Answer

I d say the best way is to make an href anchor to an ID you d never use  like  Do1Not2Use3This4Id5 or a similar ID  that you are 100  sure no one will use and won t offend people    Javascript void 0  is a bad idea and violates Content Security Policy on CSP-enabled HTTPS pages https   developer mozilla org en docs Security CSP  thanks to  jakub g  Using just   will have the user jump back to the top when pressed Won t ruin the page if JavaScript isn t enabled  unless you have JavaScript  detecting code If JavaScript is enabled you can disable the default event You have to use href unless you know how to prevent your browser from selecting some text   don t know if using 4 will remove the thing that stops the browser from selecting text    Basically no one mentioned 5 in this article which I think is important as your site comes off as unprofessional if it suddenly starts selecting things around the link

User · Answer

The first one  ideally with a real link to follow in case the user has JavaScript disabled  Just make sure to return false to prevent the click event from firing if the JavaScript executes    lt a href     onclick  myJsFunc    return false   gt Link lt  a gt    If you use Angular2  this way works    lt a  routerLink      click   passTheSalt    gt Click me lt  a gt    See here https   stackoverflow com a 45465728 2803344

User · Answer

It would be better to use jQuery     document  ready function            a   css  cursor    pointer          and omit both href     and href  javascript void 0     The anchor tag markup will be like    lt a onclick  hello    gt Hello lt  a gt    Simple enough

User · Answer

You can use javascript void 0  here instead of using   to stop anchor tag redirect to header section   function helloFunction         alert  hello world       lt a href  javascript void 0   onclick  helloFunction     gt Call Hello Function lt  a gt

User · Answer

Don t use links for the sole purpose of running JavaScript    The use of href     scrolls the page to the top  the use of void 0  creates navigational problems within the browser   Instead  use an element other than a link    lt span onclick  myJsFunc    class  funcActuator  gt myJsFunc lt  span gt    And style it with CSS    funcActuator      cursor  default      funcActuator hover      color   900

User · Answer

If you happen to be using AngularJS  you can use the following    lt a href    gt Do some fancy JavaScript lt  a gt    Which will not do anything   In addition   It will not take you to the top of the page  as with       Therefore  you don t need to explicitly return false with JavaScript  It is short an concise

User · Answer

I use href     for links that I want a dummy behaviour for  Then I use this code     document  ready function            a href        click function event            event preventDefault                  Meaning if the href equals to a hash         it prevents the default link behaviour  thus still allowing you to write functionality for it  and it doesn t affect anchor clicks

User · Answer

I would use    lt a href     onclick  myJsFunc   return false   gt Link lt  a gt    Reasons    This makes the href simple  search engines need it  If you use anything else   such as a string   it may cause a 404 not found error  When mouse hovers over the link  it doesn t show that it is a script  By using return false   the page doesn t jump to the top or break the back button

User · Answer

will take the user back to the top of the page  so I usually go with void 0    javascript   also behaves like javascript void 0

User · Answer

Usually  you should always have a fall back link to make sure that clients with JavaScript disabled still has some functionality  This concept is called unobtrusive JavaScript    Example    Let s say you have the following search link    lt a href  search php  id  searchLink  gt Search lt  a gt    You can always do the following   var link   document getElementById  searchLink     link onclick   function         try              Do Stuff Here               finally           return false             That way  people with JavaScript disabled are directed to search php while your viewers with JavaScript view your enhanced functionality

User · Answer

So  when you are doing some JavaScript things with an  lt a   gt  tag and if you put href     as well  you can add return false at the end of the event  in case of inline event binding  like    lt a href     onclick  myJsFunc    return false   gt Run JavaScript Code lt  a gt    Or you can change the href attribute with JavaScript like    lt a href  javascript     onclick  myJsFunc     gt Run JavaScript Code lt  a gt    or   lt a href  javascript void 0   onclick  myJsFunc     gt Run JavaScript Code lt  a gt      But semantically  all the above ways to achieve this are wrong  it works fine though   If any element is not created to navigate the page and that have some JavaScript things associated with it  then it should not be a  lt a gt  tag    You can simply use a  lt button   gt  instead to do things or any other element like b  span or whatever fits there as per your need  because you are allowed to add events on all the elements     So  there is one benefit to use  lt a href     gt   You get the cursor pointer by default on that element when you do a href      For that  I think you can use CSS for this like cursor pointer  which solves this problem also   And at the end  if you are binding the event from the JavaScript code itself  there you can do event preventDefault   to achieve this if you are using  lt a gt  tag  but if you are not using a  lt a gt  tag for this  there you get an advantage  you don t need to do this   So  if you see  it s better not to use a tag for this kind of stuff

User · Answer

I would honestly suggest neither   I would use a stylized  lt button gt  lt  button gt  for that behavior    x000D   x000D  button link   x000D    display  inline-block  x000D    position  relative  x000D    background-color  transparent  x000D    cursor  pointer  x000D    border  0  x000D    padding  0  x000D    color   00f  x000D    text-decoration  underline  x000D    font  inherit  x000D    x000D   lt p gt A button that looks like a  lt button type  button  class  link  gt link lt  button gt   lt  p gt  x000D   x000D   x000D    This way you can assign your onclick   I also suggest binding via script  not using the onclick attribute on the element tag   The only gotcha is the psuedo 3d text effect in older IEs that cannot be disabled     If you MUST use an A element  use javascript void 0   for reasons already mentioned    Will always intercept in case your onclick event fails  Will not have errant load calls happen  or trigger other events based on a hash change The hash tag can cause unexpected behavior if the click falls through  onclick throws   avoid it unless it s an appropriate fall-through behavior  and you want to change the navigation history    NOTE  You can replace the 0 with a string such as javascript void  Delete record 123   which can serve as an extra indicator that will show what the click will actually do

User · Answer

Depending on what you want to accomplish  you could forget the onclick and just use the href    lt a href  javascript myJsFunc    gt Link Text lt  a gt    It gets around the need to return false  I don t like the   option because  as mentioned  it will take the user to the top of the page  If you have somewhere else to send the user if they don t have JavaScript enabled  which is rare where I work  but a very good idea   then Steve s proposed method works great     lt a href  javascriptlessDestination html  onclick  myJSFunc    return false   gt Link text lt  a gt    Lastly  you can use javascript void 0  if you do not want anyone to go anywhere and if you don t want to call a JavaScript function  It works great if you have an image you want a mouseover event to happen with  but there s not anything for the user to click on

User · Answer

Just to pick up the point some of the other have mentioned   It s much better to bind the event  onload a or    document   ready    then to put JavaScript directly into the click event   In the case that JavaScript isn t available  I would use a href to the current URL  and perhaps an anchor to the position of the link  The page is still be usable for the people without JavaScript those who have won t notice any difference   As I have it to hand  here is some jQuery which might help   var  functionName    function           do something     jQuery   link id or other selector    bind  click    functionName

User · Answer

In total agreement with the overall sentiment  use void 0  when you need it  and use a valid URL when you need it   Using URL rewriting you can make URLs that not only do what you want to do with JavaScript disabled  but also tell you exactly what its going to do    lt a href    Readable Text URL Pointing To Server-Side Script  id  theLinkId  gt WhyClickHere lt  a gt    On the server side  you just have to parse the URL and query string and do what you want  If you are clever  you can allow the server side script to respond to both Ajax and standard requests differently  Allowing you to have concise centralized code that handles all the links on your page   URL rewriting tutorials  Pros   Shows up in status bar Easily upgraded to Ajax via onclick handler in JavaScript Practically comments itself Keeps your directories from becoming littered with single use HTML files   Cons   Should still use event preventDefault   in JavaScript Fairly complex path handling and URL parsing on the server side    I am sure there are tons more cons out there  Feel free to discuss them

User · Answer

Using just   makes some funny movements  so I would recommend to use  self if you would like to save on typing efforts of JavaScript bla  bla

User · Answer

Don t lose sight of the fact that your URL may be necessary -- onclick is fired before the reference is followed  so sometimes you will need to process something clientside before navigating off the page

User · Answer

I use the following   lt a href  javascript    onclick  myJsFunc     gt Link lt  a gt    instead   lt a href  javascript void 0    onclick  myJsFunc     gt Link lt  a gt

User · Answer

Neither if you ask me   If your  link  has the sole purpose of running some JavaScript code it doesn t qualify as a link  rather a piece of text with a JavaScript function coupled to it  I would recommend to use a  lt span gt  tag with an onclick handler attached to it and some basic CSS to immitate a link  Links are made for navigation  and if your JavaScript code isn t for navigation it should not be an  lt a gt  tag   Example    x000D   x000D  function callFunction     console log  function called      x000D   jsAction   x000D      cursor  pointer  x000D      color   00f  x000D      text-decoration  underline  x000D    x000D   lt p gt I want to call a JavaScript function  lt span class  jsAction  onclick  callFunction     gt here lt  span gt   lt  p gt  x000D   x000D   x000D

User · Answer

Bootstrap modals from before 4 0 have a basically undocumented behavior that they will load hrefs from a elements using AJAX unless they are exactly    If you are using Bootstrap 3  javascript void 0   hrefs will cause javascript errors   AJAX Error  error GET javascript void 0    In these cases you would need to upgrade to bootstrap 4 or change the href

User · Answer

I recommend using a  lt button gt  element instead  especially if the control is supposed to produce a change in the data   Something like a POST    It s even better if you inject the elements unobtrusively  a type of progressive enhancement   See this comment

User · Answer

You should not use inline onclick  something     in your HTML to not polluate it with meaningless code  all click bindings must be set in Javascript files    js    Set binding like this       myAnchor   click function         return false        or      myAnchor   bind  click   function         return false        Then you have a clean HTML file easy to load  and seo friendly  without thousands of href  javascript void 0    and just href

User · Answer

What I understand from your words is that you want to create a link just to run JavaScript code   Then you should consider that there are people who blocks JavaScript out there in their browsers   So if you are really going to use that link only for running a JavaScript function then you should add it dynamically so it won t be even seen if the users didn t enable their JavaScript in the browser and you are using that link just to trigger a JavaScript function which makes no sense to use a link like that when JavaScript is disabled in the browser   For that reason neither of them is good when JavaScript is disabled   Aand if JavaScript is enabled and you only want to use that link to invoke a JavaScript function then   lt a href  javascript void 0   onclick  myJsFunc     gt Link lt  a gt    is far better way than using   lt a href     onclick  myJsFunc     gt Link lt  a gt    because href     is going to cause the page to do actions that are not needed   Also  another reason why  lt a href  javascript void 0   onclick  myJsFunc     gt Link lt  a gt  is better than  lt a href     onclick  myJsFunc     gt Link lt  a gt  is that JavaScript is used as the default scripting language for most of the browsers  As an example Internet nbsp Explorer  uses an onclick attribute to define the type of scripting language that would be used  Unless another good scripting language pops up  JavaScript will be used by Internet nbsp Explorer as the default too  but if another scripting language used javascript   it would let Internet nbsp Explorer to understand which scripting language is being used   Considering this  I would prefer using and exercising on   lt a href  javascript void 0   onclick  myJsFunc     gt Link lt  a gt    enough to make it a habit and to be more user friendly please add that kind of links within the JavaScript code     document  ready function            blabla   append   lt a href  javascript void 0   onclick  myJsFunc     gt Link lt  a gt

User · Answer

You can also write a hint in an anchor like this    lt a href  javascript void  open popup image    onclick  return f    gt     lt  a gt    so the user will know what this link does

User · Answer

It would be better to use jQuery     document  ready function            a   css  cursor    pointer          and omit both href     and href  javascript void 0     The anchor tag markup will be like    lt a onclick  hello    gt Hello lt  a gt    Simple enough

User · Answer

I use javascript void 0    Three reasons  Encouraging the use of   amongst a team of developers inevitably leads to some using the return value of the function called like this   function doSomething           Some code     return false      But then they forget to use return doSomething   in the onclick and just use doSomething     A second reason for avoiding   is that the final return false  will not execute if the called function throws an error  Hence the developers have to also remember to handle any error appropriately in the called function   A third reason is that there are cases where the onclick event property is assigned dynamically   I prefer to be able to call a function or assign it dynamically without having to code the function specifically for one method of attachment or another  Hence my onclick  or on anything  in HTML markup look like this   onclick  someFunc call this     OR  onclick  someFunc apply this  arguments     Using javascript void 0  avoids all of the above headaches  and I haven t found any examples of a downside   So if you re a lone developer then you can clearly make your own choice  but if you work as a team you have to either state   Use href      make sure onclick always contains return false  at the end  that any called function does not throw an error and if you attach a function dynamically to the onclick property make sure that as well as not throwing an error it returns false   OR  Use href  javascript void 0    The second is clearly much easier to communicate

User · Answer

I m basically paraphrasing from this practical article using progressive enhancement  The short answer is that you never use javascript void 0   or   unless your user interface has already inferred that JavaScript is enabled  in which case you should use javascript void 0    Also  do not use span as links  since that is semantically false to begin with   Using SEO friendly URL routes in your application  such as  Home Action Parameters is a good practice as well  If you have a link to a page that works without JavaScript first  you can enhance the experience afterward  Use a real link to a working page  then add an onlick event to enhance the presentation   Here is a sample  Home ChangePicture is a working link to a form on a page complete with user interface and standard HTML submit buttons  but it looks nicer injected into a modal dialog with jQueryUI buttons  Either way works  depending on the browser  which satisfies mobile first development    lt p gt  lt a href  Home ChangePicture  onclick  return ChangePicture onClick     title  Change Picture  gt Change Picture lt  a gt  lt  p gt    lt script type  text javascript  gt      function ChangePicture onClick               get  Home ChangePicture                 function  htmlResult                          ModalViewDiv   remove      Prevent duplicate dialogs                       modalContainer   append htmlResult                         ModalViewDiv   dialog                         width  400                        modal  true                        buttons                               Upload   function                                    if  ValidateUpload    return false                                    ModalViewDiv   find  form   submit                                                           Cancel  function        this  dialog  close                                                     close  function                                                                 return false         lt  script gt

User · Answer

Ideally you d do this    lt a href  javascriptlessDestination html  onclick  myJSFunc    return false   gt Link text lt  a gt    Or  even better  you d have the default action link in the HTML  and you d add the onclick event to the element unobtrusively via JavaScript after the DOM renders  thus ensuring that if JavaScript is not present utilized you don t have useless event handlers riddling your code and potentially obfuscating  or at least distracting from  your actual content

User · Answer

Definitely hash     is better because in JavaScript it is a pseudoscheme    pollutes history  instantiates new copy of engine  runs in global scope and doesn t respect event system     Of course     with an onclick handler which prevents default action is  much  better  Moreover  a link that has the sole purpose to run JavaScript is not really  a link  unless you are sending user to some sensible anchor on the page  just   will send to top  when something goes wrong  You can simply simulate look and feel of link with stylesheet and forget about href at all   In addition  regarding cowgod s suggestion  particularly this     href  javascript required html  onclick      This is good approach  but it doesn t distinguish between  JavaScript disabled  and  onclick fails  scenarios

User · Answer

I personally use them in combination  For example   HTML   lt a href     gt Link lt  a gt      with little bit of jQuery     a href        attr  href   javascript void 0        or     a href        click function e       e preventDefault          But I m using that just for preventing the page jumping to the top when the user clicks on an empty anchor  I m rarely using onClick and other on events directly in HTML   My suggestion would be to use  lt span gt  element with the class attribute instead of an anchor  For example    lt span class  link  gt Link lt  span gt      Then assign the function to  link with a script wrapped in the body and just before the  lt  body gt  tag or in an external JavaScript document    lt script gt       function                  link   click function                    do something                    jQuery    lt  script gt     Note  For dynamically created elements  use       link   on  click   function            do something       And for dynamically created elements which are created with dynamically created elements  use     document  on  click    link   function            do something         Then you can style the span element to look like an anchor with a little CSS    link       color   0000ee      text-decoration  underline      cursor  pointer     link active       color  red      Here s a jsFiddle example of above aforementioned

User · Answer

On a modern website the use of href should be avoided if the element is only doing JavaScript functionality  not a real link    Why  The presence of this element tells the browser that this is a link with a destination   With that  the browser will show the Open In New Tab   Window function  also triggered when you use shift click    Doing so will result in opening the same page without the desired function triggered  resulting in user frustration    In regards to IE  As of IE8   element styling  including hover  works if the doctype is set  Other versions of IE are not really to worry about anymore   Only Drawback  Removing HREF removes the tabindex  To overcome this  you can use a button that s styled as a link or add a tabindex attribute using JS

User · Answer

I tried both in google chrome with the developer tools  and the id     took 0 32 seconds  While the javascript void 0  method took only 0 18 seconds  So in google chrome  javascript void 0  works better and faster

User · Answer

I see a lot of answers by people who want to keep using   values for href  hence  here is an answer hopefully satisfying both camps   A  I m happy to have javascript void 0  as my href value    lt a href  javascript void 0   onclick  someFunc call this   gt Link Text lt  a gt    B  I am using jQuery  and want   as my href value    lt a href     onclick  someFunc call this   gt Link Text lt  a gt    lt script type  text javascript  gt         Stop page jumping when javascript links are clicked         Only select links where the href value is a              a href        live  click   function e             return false     prevent default click action from happening           e preventDefault       same thing as above          lt  script gt    Note  if you know links won t be created dynamically  use the click function instead       a href        click function e

User · Answer

Here is one more option for completeness sake  that prevents the link from doing anything even if JavaScript is disabled  and it s short      lt a href   void  onclick  myJsFunc    gt Run JavaScript function lt  a gt    If the id is not present on the page  then the link will do nothing   Generally  I agree with the Aaron Wagner s answer  the JavaScript link should be injected with JavaScript code into the document

[javascript] Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

Examples related to javascript

Examples related to html

Examples related to performance

Examples related to optimization

Examples related to href