HTML/JavaScript Linking

Question

This question may have been asked before, but I had trouble finding an answer, since I didn't quite know what search terms to use.

In HTML, how do you make a link go a place, but execute JavaScript instead when it is clicked? Right now, I have a link that's somewhat like this:

<a href="#" onclick="javascript:dostuff()">Stuff</a>

But, the thing is, when someone right clicks the link, I want them to be able to copy a direct URL to the link. Also, if someone's browser does not support JavaScript, or they have it disabled, I would still like them to be able to reach the page. Is it just

<a href="http://linkhere" onclick="javascript:dostuff()">Stuff</a>?

Or is there something more complicated?

Thanks!

As for gracefully degrading with no Javascript support, I think this article will be useful: en.wikipedia.org/wiki/… — amartynov
– amartynov, Commented Nov 1, 2009 at 17:52

Quentin · Accepted Answer · 2009-11-01 19:30:40Z

4

<a href="http://linkhere" onclick="return dostuff()">Stuff</a>

Make sure that the dosuff function returns false if you want the link to not be followed when the script runs.

(The 'javascript:' is pointless. It labels a loop, but you don't have a loop. See the HTML spec for how to specify which language is being used in the intrinsic event handler attributes — better yet, use unobtrusive JavaScript and progressive enhancement).

edited Nov 1, 2009 at 19:30

answered Nov 1, 2009 at 17:51

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AriX Over a year ago

Alright then, I feel stupid for not just trying that first. I assumed it was more complicated :p

Jason Over a year ago

You may also wish to modify that to onclick="dostuff(); return false". This keeps the browser from following the link when you click on it.

AriX Over a year ago

No, the question was about running the JS and not following the link, sorry if I wasn't clear. I just wanted the link to appear on the status bar at the bottom of the screen and be copyable/follow-able in a new tab. Thanks Jason!

Quentin Over a year ago

Updated in response to the clarification.

BalusC · Accepted Answer · 2009-11-01 19:23:16Z

2

You need to let the event return false to block the default action.

<a href="http://example.com" onclick="doSomething(); return false;">

answered Nov 1, 2009 at 19:23

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Collectives™ on Stack Overflow

HTML/JavaScript Linking

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related