• JavaScript-only Links

    Mar 19 2007

    JavaScript-only interfaces often have some links that activate some kind of click handler but don't actually go to another page. These are called JavaScript-only links, and there are a bunch of different ways to make them, listed here from crappiest to best:

    • <a href="#" onclick="myFunc();return false">

      This method is really common, and not that great. If you are scrolled down the page, and forget to include the return false, the page will jump up to the top. Also, the user will see "#" in the status bar (not a real problem, but kind of messy). The link requires JavaScript to work. It's basically one big workaround for making some text clickable.

    • <a href="javascript:myFunc()">

      This method gets a lot of slack, but I think it's slightly better than using href="#". True, it's a totally invalid href attribute, and it's pure luck that browsers actually support the javascript: protocol. But it works (if you have JavaScript enabled). And it has a slight benefit (or downside?) that users actually see the name of the function in the status bar, giving them a clue as to what is going on. You also don't need to worry about returning false from the click function.

    • <a href="#myFunc" onclick="myFunc()">

      Very similar to using href="#", this method actually changes the URL to something slightly meaningful. This method can be useful if it changes the page in a repeatable way (displaying a specific tab or hidden area). This way you can add JavaScript that looks in the URL, sees the #myFunc, and recreates that change when the user refreshes the page. If you're tricky, you can even get the back and forward buttons to work. The downside: if the user has scrolled down, the page will scroll back to the top.

    • <span onclick="myFunc()" style="text-decoration:underline; color:#00f; cursor:pointer">

      This is my favourite obtrusive method. If you're going to make a JavaScript-only link, why use a link at all? Anything can be clickable in JavaScript, and using CSS you can make a span look exactly like a link (even the mouse cursor). Downside: this method is still obtrusive, requiring JavaScript, but at least it's honest about it.

    • <a href="alternate.html" onclick="myFunc();return false">

      This is a highly superior method to the others. If JavaScript is disabled, the link still works, and ideally goes somewhere that does the same stuff that the JavaScript function would do.

    Disclaimer: I don't recommend using the onclick or style attributes on a regular basis. I also don't recommend making JavaScript-only interfaces ever (unless you have to, and you rarely have to). For more on how not to do all this bad stuff, check out my presentation on Unobtrusive Ajax.

  • Comments

    1. Daniel Wintschel at 7:27pm on March 19, 2007

    But...but...what about GMail, and Google Web Toolkit?!?!? <ahem>

    2. Menno at 1:42am on March 20, 2007

    "If you're going to make a JavaScript-only link, why use a link at all?"
    Well, the main reason for that is that links can receive focus and can be part of keyboard navigation using TAB, space and enter. With spans this is a lot more difficult. Actually, I slightly prefer
    <a href="alternate.html" onclick="return myFunc();">
    So myFunc() can return true or false based on whether or not the JavaScript is likely to fail.

    3. Patrick Fox at 11:39am on March 23, 2007

    Wouldn't it be even most unobtrusive to avoid using the inline onclick attribute altogether and dynamically add a click event to specified links(using class names or id) on page load using JavaScript?

    <a href="#equivalent_alternative" class="alternatelink">...</a>

    where the equivalent alternative is shown somewhere on the page.

    4. Jesse Skinner at 11:46am on March 23, 2007

    @Patrick - yep, that's even better for sure, and it's why I mention that "I don't recommend using the onclick or style attributes on a regular basis." Besides, if you're doing a JavaScript-only link to begin with, you're already making a painfully obtrusive choice, so a little inline JavaScript will be the least of your problems.

    5. lewis litanzios at 9:26pm on March 25, 2007

    ... and this is why we love jquery:

    $(document).ready(function() {
      $("a").click(function() {
        alert("Hello world!");
      });
    });

    taken from: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

    is the validation on this any better though? semantics aside.

    6. Michael Odden at 2:26am on March 27, 2007

    My solution is to make JavaScript itself generate all JS-only links at runtime. This way users with limited / no support won't see the links at all.

    Otherwise a great subject about a problem of great concern.

    (Just stumbled over your blog from a comment of yours at snook.ca :) )

    7. Jesse Skinner at 4:04am on March 27, 2007

    Ah, thanks Michael for mentioning that. I meant to do the same in the article somewhere. If you're going to generate a link with JavaScript, you still have to figure out what HTML to generate, and ultimately you're faced with the same problems as if you embedded the JS-only links right into the HTML.

    8. Michael Odden at 8:53am on March 27, 2007

    No problem Jesse.

    Well, yes, the developer still has to think - and that's the way I like it :). But seen from a user-(and usability) point of view: Why display an unusable button? Of course, there are other ways to achieve this, but I do personally prefer to do any changes to the DOM that are related to JS being supported with JS itself.

    9. Andreas at 8:00am on March 28, 2007

    I think these blog is really useful for new comers and Excellent resource list.
    It´s a very interesting Blog and simple answer of many questions.

    10. Michael Odden at 4:18am on March 29, 2007

    Yup, it's great with people who manages to break it down to the essences and explain it in an easy and managable way.

    By the way: Great "Unobtrusive Ajax"-presentation.

    11. Leeds Web Design at 1:23pm on April 7, 2007

    What about mentioning javascript:void(0);?

    12. Jesse Skinner at 1:28pm on April 7, 2007

    My god, you're right! Well I'd squeeze it in between using href="#" and href="javascript:func()". I'm not particularly fond of it because I've never heard of the void() function, and I'm not quite sure why you have to pass the void() function a zero. That's always boggled my mind.

    But thanks, Leeds Web Design.

    13. Jen at 7:43pm on April 30, 2007

    Thanks for the help.  I'm just getting started with Javascript and these are some helpful pointers for a newbie.

    14. gratis sms at 6:46pm on September 2, 2007

    nice work, its very helpeful for us.

    15. Jesse Wilson at 9:58pm on September 19, 2007

    I used the #descriptiveComment tip at work today. Thanks Jesse!

    16. Mojo at 2:52pm on February 12, 2008

    Void is part of the "special" operators in JavaScript, the same category as "function" and "this" and "new" etc. 

    Void evaluates an expression without returning a value. The 0 is sent as the argument to void, I'm thinking it evaluates to nothing.

    When you use void as a hyperlink, which is so ugly, void returns nothing to the browser and it goes no where.

    17. ldexterldesign at 5:37pm on October 7, 2010

    Discovered http://api.jquery.com/event.preventDefault/ tonight, but I remember my roots :P

    Dude, where you been?! Last post: 19/02/2009???

    Commenting is now closed. Come find me on Twitter.