190

I use jQuery, I need to make some anchor tags perform no action.

I usually write it like this:

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

However this refers to the top of the page!

6

20 Answers 20

308

There are a few less than perfect solutions:

1. Link to a fake anchor

<a href="#">

Problem: clicking the link jumps back to the top of the page

2. Using a tag other than 'a'

Use a span tag and use the jquery to handle the click

Problem: breaks keyboard navigation, have to manually change the hover cursor

3. Link to a javascript void function

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

Problem: breaks when linking images in IE

Solution

Since these all have their problems, the solution I've settled on is to link to a fake anchor, and then return false from the onClick method:

<a href="#" onClick="return false;">

Not the most concise of solutions, but it solves all the problems with the above methods.

9
  • 2
    I usually use the javascript:void(0); approach, because using # displays the current URL in Firefox's bar on mouse over, which can be misleading for the user. Jul 23, 2013 at 16:10
  • 8
    breaks when linking images in IE What does this mean?
    – eugene
    Aug 30, 2013 at 3:44
  • 16
    @eugene this question is 3 years old now, but IE used to make images disappear when surrounded by a link to a void function. Not sure when it was fixed, but it works in IE10, which is all I have installed. I personally now use <a href="javascript:;">
    – zaius
    Sep 1, 2013 at 0:47
  • 1
    I have used comments in there, too: <a href="javascript:void(0); // Show properties palette">. That way, when user hovers, they see the comment which can give them a hint what to expect when they click. (Although you could use a tooltip, too.) Sep 10, 2014 at 19:12
  • 8
    It seems that href="javascript:" is also enough and works in the latest major browsers. No need for the semicolon, in fact PhpStorm even suggests to remove it.
    – jlh
    Jul 24, 2017 at 13:37
118

If you don't want to have it point to anything, you probably shouldn't be using the <a> (anchor) tag.

If you want something to look like a link but not act like a link, it's best to use the appropriate element (such as <span>) and then style it using CSS:

<span class="fake-link" id="fake-link-1">Am I a link?</span>

.fake-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

Also, given that you tagged this question "jQuery", I am assuming that you want to attach a click event hander. If so, just do the same thing as above and then use something like the following JavaScript:

$('#fake-link-1').click(function() {
    /* put your code here */
});
9
  • 41
    This has a problem: it doesn't allow tab-navigation.
    – Iraimbilanja
    May 29, 2009 at 7:26
  • 7
    Note that (as Iraimbilanja points out) the span approach here disables the possibility to invoke the function using the keyboard, which I would consider a usability problem. May 29, 2009 at 7:38
  • 5
    Also an accessibility problem. You can resolve it by using a button element (generated from JavaScript so non-JS users don't get a broken control).
    – Quentin
    May 29, 2009 at 8:13
  • 4
    Here's a quick fix for that: tabindex="0" on a non-link element will enable keyboard navigation in most modern browsers. May 29, 2009 at 9:58
  • 1
    Another 'problem' is that you don't the CSS :hover pseudo class won't work on elements that aren't links in IE6. But since you're adding these elements through JavaScript anyway (at least, you should), you could just as well write a script that adds a .hover class to the element when hovered. May 29, 2009 at 10:01
50

To make it do nothing at all, use this:

<a href="javascript:void(0)"> ... </a>
1
  • 2
    or just <a href="javascript:;">. P.S. doesn't work with target=_blank though Apr 1, 2018 at 22:54
39

The correct way to handle this is to "break" the link with jQuery when you handle the link

HTML

<a href="#" id="theLink">My Link</a>

JS

$('#theLink').click(function(ev){
    // do whatever you want here

    ev.preventDefault();
    ev.stopPropagation();
});

Those final two calls stop the browser interpreting the click.

1
  • 5
    While that does sound like it's "proper" because it stops event bubbling, "return false" is a lot less verbose and does the same thing. The only time you would want to do that is if you already have event handlers registered to clicks on links via jQuery.
    – aleemb
    May 29, 2009 at 8:26
34

There are so many ways to do it like

Dont add and href attribute

<a name="here"> Test <a>

You can add onclick event instead of href like

<a name="here" onclick="YourFunction()"> Test <a>

Or you can add void function like this which would be the best way

<a href="javascript:void(0);"> 
<a href="javascript:;">
5
  • Is the name attribute required? Nov 5, 2017 at 13:50
  • @PetrusTheron Not necessary . . Nov 5, 2017 at 16:29
  • This is a rip-off of pre-existing answers
    – aross
    Apr 15, 2019 at 14:49
  • 1
    Don't forget to set the style of your anchor tag if you remove the href attribute as it will no longer behave like a hyperlink (even though the onclick still works) you'll have to reset stuff like cursor: pointer; and the :hover selector.
    – Partack
    May 18, 2020 at 12:42
  • 1
    @Partack Correct.. Thanks for noticing Jun 1, 2020 at 11:48
24

What do you mean by nothing?

<a href='about:blank'>blank page</a>

or

<a href='whatever' onclick='return false;'>won't navigate</a>
1
  • 1
    Agreed - just return false from your jQuery method and voila, it won't go anywhere
    – joshcomley
    May 29, 2009 at 7:34
17

This answer should be updated to reflect new web standards (HTML5).

This:

<a tabindex="0">This represents a placeholder hyperlink</a>

... is valid HTML5. The tabindex attribute makes it keyboard focusable like normal hyperlinks. You might as well use the span element for this as mentioned previously, but I find using the a element more elegant.

See: https://w3c.github.io/html-reference/a.html
and: https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href

Some JavaScript to respond to clicking the link (or tabbing to the link, pressing Enter):

<script type="module">
    let linkActivated = e => {
        alert(`Event triggered: ${e.type}`);
    };

    document.querySelectorAll('a:not([href])').forEach(el => {
        el.addEventListener('keydown', e => {
            if (e.key == 'Enter') {
                linkActivated(e);
            }
        });

        el.addEventListener('click', linkActivated);
    });
</script>
7
  • 1
    This is also valid HTML4, but it won't style the anchor as a link.
    – interjay
    Jan 10, 2013 at 13:23
  • 1
    I didn't know it was valid html4, but the HTML5 spec explicitly mentions the use-case. And styles which don't target the href attribute will work just fine, just the default browser styles may be an issue.
    – aross
    Jan 27, 2013 at 15:08
  • 1
    This also doesn't trigger click event when user focuses the element and presses enter (tested in Firefox 51).
    – torvin
    Oct 9, 2016 at 9:37
  • @torvin, that's simple. Use the keydown event.
    – aross
    Oct 10, 2016 at 7:56
  • snazzy quirk, but in window 10 it adds a bordered box around the element
    – 1-14x0r
    Sep 29, 2017 at 6:05
15

I think you can try

<a href="JavaScript:void(0)">link</a>

The only catch I see over here is high level browser security may prompt on executing javascript.

Though this is one of the easier way than

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

this should be used sparingly

Read this article for some pointers https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void

1
  • Correct answer, allows tab navigation.
    – basickarl
    Dec 15, 2015 at 12:47
13

Here are the three ways for <a> tag's href tag property refer to nothing:

<a href="JavaScript:void(0)"> link </a>

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

<a href="#" onclick="return false;"> Link </a>
1
5

I know this is an old question, but I thought I'd add my two cents anyway:

It depends on what the link is going to do, but usually, I would be pointing the link at a url that could possibly be displaying/doing the same thing, for example, if you're making a little about box pop up:

<a id="about" href="/about">About</a>

Then with jQuery

$('#about').click(function(e) {
    $('#aboutbox').show();
    e.preventDefault();
});

This way, very old browsers (or browsers with JavaScript disabled) can still navigate to a separate about page, but more importantly, Google will also pick this up and crawl the contents of the about page.

5

Make sure all your links that you want to stop have href="#!" (or anything you want, really), and then use this:

jq('body').on('click.stop_link', 'a[href="#!"]',
function(event) {
     event.preventDefault();
});
5

You can have an HTML anchor (a tag) without an href attribute. Leave off the href attribute & it won't link to anything:

<a>link</a>
3
  • Thank you! It perfectly worked for my case. Where I wanted to have Anchor tag to open in new tab when there is URL, but nothing if no URL. In case of # it was accepting a CLICK and moving it to top of the page. Having no href part as you suggested. It solved the issue! Formatting looks great due to a tag, click issue gone with no href. Thank you!!! Aug 16, 2016 at 15:12
  • 1
    If anyone else is thinking if it is HTML5 valid, then answer is YES :) stackoverflow.com/a/33046203/5323892 . Here is from example from standards page (see the 3rd li item) : <nav> <ul> <li> <a href="/">Home</a> </li> <li> <a href="/news">News</a> </li> <li> <a>Examples</a> </li> <li> <a href="/legal">Legal</a> </li> </ul> </nav> Aug 16, 2016 at 15:19
  • It works but if you want the mouse pointer to change to finger, just add href="JavaScript:void(0)" as suggested on @Rutesh Makhijani 's answer.
    – Tarik
    Aug 24, 2016 at 7:14
5

The only thing that worked for me was a combination of the above:

First the li in the ul

<li><a onclick="LoadTab2_1()" href="JavaScript:void(0)">All Assigned</a></li>

Then in the LoadTab2_1 I manually switched the tab divs.

$("#tabs-2-1").hide();
    $("#tabs-2-2").show();

This is because the disconnection of the also disconnects the action in the tabs.

You also need to manually do the tab styling when the primary tab changes things.

$("#secTab1").addClass("ui-tabs-active").addClass("ui-state-active").addClass("ui-state-hover").addClass("ui-state-focus");
    $("#secTab1 a").css("color", "#ffffff");
2

You can do it by

<a style='cursor:pointer' >Link</a>
1
<a href="#" onclick="SomeFunction()"  class="SomeClass">sth.</a>

this was my anchor tag. so return false on onClick="" event is not usefull here. I just removed href="#" property and it worked for me just like below

<a onclick="SomeFunction()"  class="SomeClass">sth.</a>

and i needed to add this css.

.SomeClass
{
    cursor: pointer;
}
2
1

I encountered this issue on a WordPress site. The headers on dropdown menus always had the attribute href="" and the header plugin being used only allowed standard urls. The easiest solution there was just to run this code in the footer:

jQuery('[href=""]').click(function(e){
    e.preventDefault();
});

This will prevent blank anchors from doing anything.

0

React no longer support using a function like this href="javascript:void(0)" in your anchor tag, but here is something that works pretty well.

<a href="#" onClick={() => null} >link</a>
0

If you want to stop redirect to another page after clicking on the link you can do the following

<a href="/your-page" onClick={(e)=>e.preventDefault()}>link</a>

-1

I know this is tagged as a jQuery question, but you can answer this with AngularJS, also.

in your element, add the ng-click directive and use the $event variable which is the click event... prevent its default behavior:

<a href="#" ng-click="$event.preventDefault()">

You can even pass the $event variable into a function:

<a href="#" ng-click="doSomething($event)">

in that function, you do whatever you want with the click event.

-4

In HTML5 just remove the href attribute

<a>Your text</a>
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.