0

I use

href="javascript:void(0)"

to disable the href property and then use onlclick to give functionality to my anchor elements. How can I do this programatically.

3 Answers3

3

Not sure what you mean when you say "works in xhtml, but not in javascript."

If you want to disable a link you can just use return false to cancel the default action.

<a href="http://www.apple.com" onclick="return false;">Apple</a>

Update - in context of a function

<a href="/mypage.html" onclick="myFunction();">My Page</a>
<a href="/mypage.html" onclick="myFunction2(); return false;">My Page</a>

<script>
   function myFunction() {
       //do all the javascript stuff i want
       return false;
   }

   function myFunction2() {
       //do all the javascript stuff i want
   }
</script>
mrtsherman
  • 39,342
  • 23
  • 87
  • 111
  • @Chris Aaker - yes, just add return false to the end of your method. I updated my answer with an example. Also see my comment on Scott's solution. It is important depending on browser versions you plan to support. – mrtsherman Aug 29 '11 at 03:46
  • @JamWaffles - you have a fine eye for details. – mrtsherman Aug 29 '11 at 03:46
  • @mrtsherman Thank you. You have a devilish sense of humour ;-P – Bojangles Aug 29 '11 at 15:18
3

A few issues if I may.

I would suggest an unobtrusive approach

I would not use return false. It could have unexpected results. A quick google search will have more info.

Use preventDefault() to remove the default functionality.

https://developer.mozilla.org/en/DOM/event.preventDefault

Edit:

If you're unsure how to control the click event unobtrusively, addEventListener() is what you are after. You can control everything from there, including preventDefault() https://developer.mozilla.org/en/DOM/element.addEventListener

Scott Radcliff
  • 1,501
  • 1
  • 9
  • 13
  • Not sure why you would say `return false` would have unexpected results. It is literally the oldest supported method and even works in IE2. I am not aware of a single browser version that doesn't support this. If he does go the preventDefault route he should know that addEventListener is not supported by IE6 and he will need to use attachEvent instead. Quirksmode goes into exquisite detail - http://www.quirksmode.org/js/events_early.html – mrtsherman Aug 29 '11 at 03:44
  • Return false does not stop bubbling. That is what I was referring to without going into great detail, and why I suggested a Google search. There is a large thread on the topic here. http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false – Scott Radcliff Aug 29 '11 at 13:20
2

Don't put javascript in href. Leave the href alone. Do what you want in onclick, just make sure it returns false (so that default link action isn't executed). And remember that people opening the link in new tab/window won't get your code executed - they'll just open the link under href.

If it doesn't make sense to have a href at all, you can also have onclick on any other element, not just a.

rczajka
  • 1,810
  • 14
  • 13
  • +1 Good advice to leave `href` alone, although it's better to not user `onClick` and use `addEventListenter()` like @Scott says. Good answer, though. – Bojangles Aug 28 '11 at 23:37