Button Links

There are some instances where you want a link in your web page that is only supposed to do something when JavaScript is enabled. Where you only want the link to be there when JavaScript is enabled the simplest solution is to simply add the link from JavaScript. If you do that then it doesn't matter what is in the href attribute as you know for certain that it will never be run because you are cancelling the default action from within the JavaScript you have attached to the link.

Where you want the link to be there but not actually do anything except when JavaScript is enabled then coding the link is slightly more complicated. Most sites I have seen where this situation arises have coded their JavaScript only links incorrectly with two variants being common.

<a href="#" ...

This variant will automatically jump everyone without JavaScript back to the top of the web page. You should only ever code links like this where you are adding the link from JavaScript where the href will never run or where you are providing a code sample where it is intended that the person writing actual code based on the sample will substitute a real web address for the #.

<a href="javascript:...

This variant is just as bad because the intended use for links like this is that you right click on them and select to add the JavaScript into the bookmarks menu where it can then be run on any page. Where you want people using their left mouse button to click on the link you shouldn't be using this style of coding as that is not how such a link is intended to be used.

So how should you code a link where nothing is supposed to happen when the person visiting the page doesn't have JavaScript and clicks on the link and nothing is supposed to happen when anyone right clicks on the link? Well the mistake that these people have made is in using the wrong tag to create their JavaScript only link. Of course we can't substitute a span tag as a span never gets the focus and so styling a span tag to look like a link will not work for those visitors who are interacting with the web page using their keyboard.

The correct tag to use is the button tag. A <button> functions exactly the same way as an <a> in that it can get the focus when navigating from the keyboard and you can attach event handling to it. The difference is that it doesn't have a default action that will be run if JavaScript is not available.

<button id="xx">link</button>

With a link coded like this in our HTML our visitors can navigate to it using either the keyboard or mouse and can interact with it just as they can with an <a> except that until we add some JavaScript the button does nothing. Of course it also doesn't look like a link but we can quickly correct that by adding some CSS into the stylesheet attached to our page.

#xx { border:0; background-color:inherit; color:#00f; text-decoration:underline; cursor:pointer;}

Now the button in our HTML looks and behaves exactly like athat doesn't have JavaScript attached except that clicking or right clicking on it does absolutely nothing (well right clicking brings up the context menu but it is no different from how it looks if you right click anywhere else in the page - there are no additional menu options as there are for <a> tags).

All that remains is to attach the JavaScript and you do that the same way that you would if you were attaching JavaScript to anywhere else in the web page (in fact that's the main reason you would give the button an id).

The above working example uses the following JavaScript - you would of course substitute your own code for the alert() since alert() is as much an example placeholder in JavaScript example code as href="#" is in HTML example code.

document.getElementById('xx').onclick = function() {alert('clicked');}


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow