CODEWITHSUNDEEP
javascripthtmlhyperlink
ZeroGravity
ZeroGravity

Reputation: 311

Different methods to make a null link?

Is there a way to make a null link besides these methods?

<a href="javascript:;">Example</a>

<a href="javascript:void(0);">Example</a>

<a href="#">Example</a>

I don't mind something that makes the page jump to the top but I don't want it to alter the URL in the address bar. The ideal link would be one as similar as possible to the ones featured on navigation boxes on Wikipedia but there is much more to that link than meets the eye as it has a pretty large script associated with it. I'm just looking for something to put into the a tag.

Thanks in advance.

Upvotes: 27

Views: 65619

Answers (6)

Huseyin
Huseyin

Reputation: 87

Different methods to make a null link.

<a href="#!">Example link</a>

OR

<a href="#" onclick="return false;">Example link</a>

Upvotes: 5

JWL
JWL

Reputation: 14221

No, all the potentially valid alternatives are not done IMO. I made the following experiments with Chrome and Firefox, managing to identify 2 extra alternatives to the ones already suggested in the question and the answers.

The ones that failed (NOT null links):

This one is not rendered as a link at all, and isn't clickable either.

<a>null-link-1</a>

The next alternative when clicked, moved to document start - not a null link.

<a href="">null-link-2</a>

The next alternative when clicked, navigates away from document - not a null link.

<a href=";">null-link-3</a>

The next alternative when clicked, when clicked, moves to document start - not a null link.

<a href="" onclick="javascript:;">null-link-4</a>

Now, here are the ones that worked : True Null Links:

Both of the alternatives below, when clicked, do strictly nothing - null links? YES.

<a href="" onclick="return false;">null-link-5</a>

This other one is almost the same as the above, but is offered as a true alternative, mostly for its brevity.

<a href="" onclick="return !1;">null-link-6</a>

NOTE: One of the key differences between my working solutions and those of nnnnnn, is my preference of a blank href, otherwise, they work on the very same principle.

Upvotes: 8

donmega
donmega

Reputation: 151

The # method is the simplest, and is always compatible. Using a href=# however, will jump to the top of the page. To prevent the jump, simply reference an unnamed anchor. Like this:

<a href=#nothing >This link has a null href!</a>

<a href=#doesnotexist >This link has a null href!</a>

<a href=#null >This link has a null href!</a>

<a href=#void >This link has a null href!</a>

<a href=#whatever >This link has a null href!</a>

Upvotes: 15

nnnnnn
nnnnnn

Reputation: 150080

You just want something you can shove in the <a> tag? OK:

<a href="#" onclick="return false;">Example</a>

Combine it with any of the href= methods from your question.

Given that a link that doesn't go anywhere is fairly useless, can I assume you want to kick off some JavaScript function when the link is clicked? If so, do this:

<a href="#" onclick="yourFunctionHere(); return false;">Example</a>

Upvotes: 27

Pankaj Upadhyay
Pankaj Upadhyay

Reputation: 13594

I think you could do well by leaving the href empty altogether, this will show the link to current page :

<a href="" >Example</a>

Upvotes: -5

icktoofay
icktoofay

Reputation: 129139

Wikipedia uses the third option. To use that, you can use this HTML:

<a href="#">link</a>

And then attach an event handler with JavaScript:

// I assume `link` is set the element shown above.
link.addEventListener('click', function(e) {
    alert("You clicked me!");
    e.preventDefault();
    e.stopPropagation();
    return false;
}, false);

addEventListener should work in most modern browsers, but to be more compatible and more concise, you may wish to use a JavaScript library like jQuery:

$("a").click(function() {
    alert("You clicked me!");
    return false;
});

Upvotes: 6

Related Questions