2

I know it's frowned upon to create links such as <a href="javascript:my_func();">link text</a> as this tricks the user into thinking it's a real link.

I have quite a few links that actually just run JS code in the browser instead of forcing page navigation, and as such I don't want to use the above and am looking for an alternative that works in all browsers and prevents middle clicking from opening a new tab/ window.

Would the following approach be satisfactory?

HTML

<a href="javascript:void(0);" id="id_here">link text</a>

JavaScript

$("#id_here").bind('click',(function(params){
    return function(){
        // do stuff here with `params`
    };
})(params));
Improve this question
1
  • Oh, please also note that this is for a JavaScript modification for a forum host - so handlers for non JS users aren't useful at all! Commented Aug 31, 2012 at 22:23

4 Answers 4

Reset to default
3

javascript: anything is bad. There isn't much difference between the two javascript: uses above. Using "#" for the href is about as bad; it adds to the history with JS off and the link is not useful. What you should do (ideally) is have the link actually work, e.g.

<a href="/an/actual/path"> ...

Then, with JS, prevent default link behavior

$("#id_here").on('click', function (e) { e.preventDefault(); });

If there is no actual path to go to, then the link should not even be exposed with JS off; you can either append it to the DOM later or just hide it with CSS (and show it with JS).

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

14 Comments

I should have said, this is for a JS only production, so there's no need to cater for those without JS.
In that case you don't even need an href or e.preventDefault(), (and you can use any element, but <a> probably makes the most sense semantically).
@KeirSimmons: Then cater for those using middle click! Why can't I open your link in a new tab if I want to?
e.preventDefault(); suppresses the natural action of the hyperlink, hence href="#" will not add to the history object. Some browsers need a non-null href in order to properly render anchors as clickable - "#" is the best option. Personally, I don't cater for browsers with js off.
@KeirSimmons may be better to display nothing if JS is off then, at least to prevent accidents. Or maybe a "Turn JS On" message or something.
|
0

I would recommend you used another node other than <a>, such as a <div>:

<div id="jsLink" style="cursor:pointer">Click Me</div>

and jQuery:

$("#jsLink").click(function(params){
  // do something
}
Improve this answer

2 Comments

-1 - not a good idea - won't be tab-able to, for instance
And do not forget to style your div to make it look like a link. Oh. Also it is a div - block element
0 
<a href="#" id="id_here">link text</a>

# is here to make a link look like link JavaScript:

$("#id_here").bind('click',function(e){
    e.preventDefault();
})

e.preventDefault() does not allow browser to execute default action (like navigate to another page)

Improve this answer

2 Comments

I might show the user a slightly more meaningful url such as #!/edit-post
No matter what will be in href, except that it should not be empty. Otherwise it will be displayed like a span
0

I did some playing around, and you can get some good results with hashchange:

var commands = {
    foo: function() { alert("Foo!"); },
    bar: function() { alert("Foo bar!"); },
    baz: function() { alert("Foo bar baz!"); }
};

$(window).bind('hashchange', function() {
    var hash = window.location.hash.replace(/^#/,'');
    if(commands[hash]) {
        commands[hash]();
        return false;
    }
}).trigger('hashchange');​

With the simple HTML of:

<a href="#foo">Foo</a>
<a href="#bar">Bar</a>
<a href="#baz">Baz</a>​

This even works if you right click -> open in new tab or middle click!

Note that hashchange is not supported by all browsers.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.