[thelist] Avoid "#" and "onclick" in "<a href"

Christian Heilmann codepo8 at gmail.com
Fri Mar 24 11:26:07 CST 2006


> ><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> > From: Christian Heilmann
> >
> > There is nothing wrong with using a #' as long as you
> > stop the link from following it. :-)
> ><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
>
> That's nonsense.  What sort of behavior are you sticking the non-JS users
> with by doing that?  If you don't take their experience into consideration,
> then using the # is *not* ok.  If, however, you are doing something for them
> that involves an inline anchor of some sort, then by all means, but I don't
> see that being the case.

*DOH*, sorry about that, I shouldn't answer here while being in the
middle of writing stuff.

Jeff is of course spot on with this perception.

What I meant to say was that using a hash as the href on a _JavaScrip
generated link_ is totally acceptable and you do need it to make the
link show up as a link and be keyboard accessible.

Meaning you can create a new link like this:

window.onload=function(){
  var newLink=document.createElement('a');
  newLink.appendChild(document.createTextNode('click me I\'m pretty'));
  newLink.onclick=function(){
    alert('told you I am pretty');
    return false;
  }
  document.body.appendChild(newLink);
}

However, this link will not look like a link and you cannot tab to it
(it is a target, not an anchor)

If you add the hash though, it shows up as a link and can be reached
via keyboard:

window.onload=function(){
  var newLink=document.createElement('a');
  newLink.appendChild(document.createTextNode('click me I\'m pretty'));
  newLink.onclick=function(){
    alert('told you I am pretty');
    return false;
  }
  document.body.appendChild(newLink);
  var newLink2=document.createElement('a');
  newLink2.appendChild(document.createTextNode('click me I\'m even prettier'));
  newLink2.href='#';
  newLink2.onclick=function(){
    alert('told you I am prettier');
    return false;
  }
  document.body.appendChild(newLink2);
}

See it in action: http://icant.co.uk/sandbox/newlinks.html



More information about the thelist mailing list