Running JavaScript from an Anchor Element
We ran into a situation at our office last week that got us discussing the best way attach JavaScript code to an anchor element. I know there are many solutions and each has it pro’s and con’s that can be associated to usability and browser quirks.
The method I use, uses an octothorpe (hash, pound sign) as the value of the href attribute, with my JavaScript code in the onclick event handler. I make sure the event handler returns false which ensures that an entry is not made in the browser’s history and it also prevents the link from jumping to the top of the page. The code looks like this:
<a href="#" onclick="someFunction(); return false;">go</a>
So my question to you is: how do you handle attaching JavaScript to an anchor element and why do you choose that method. I would also appreciate comments on my method as well.
**Using [ and ] instead of the HTML brackets below…
I use [a href=”javascript:someFunction();”]link[/a]
vs. an onClick event if doing anything with images as IE in particular will screw image related things up when using this. If I need to use an on click i will use this:
[a href=”javascript:void(0);” onclick=”someFunction();”]link[/a]
Hope this input helps!
You could tie in your function/logic inside the one aHref but to me that seems ugly and kind of hacks away at the browser so to speak.
instead do:
[a href=”javascriptEnabled.html” id=”uniqueID”]Text[/a]
Then someone (anywhere you feel like) put the following:
function anchorDecorate(idString) {
with(document.getElementById(‘objId’)) {
setAttribute(“href”,”yourvaluetoyourpage”)
setAttribute(“target”,”yourValue”);
}
}
…
then in onLoad() via body or simply below the entire html, put:
function onLoad(){
anchorDecorate(‘uniqueID’);
}
Point is, you abstract your javascript from your HTML in such a way that in the event a browser isn’t supported (mobile devices etc) the user can see an action take place – in this case going to
a page that states “javascript must be enabled, sorry!”.
Majority browsers support the above as its accessing the very core of the DOM (remember everything really is a node! and never simply add a property, always use setAttribute().
this will enable you to not only add complex js freely but could retire javascript code if it turns out to be no longer supported.
I like to keep JS passive and html clean of it all.
I implement a similiar procedure as above but i add elements to a registry stack along with prototype objects to decorate them,
so when an onload event triggers it will simply go forth and decorate them with the appropriate
class.
hey scott,
do you also drive around the block 50 times before going to work?