58

I want to create a link , and to force the link anchor using javaScript, i tried the following:-

<a id="ServerSort" href="#" style="text-decoration:underline">

it worked well but the page will loose its current position after clicking on the <a> link.

I need the link to have an href, because i need need the mouse to change the cursor when going over it ?

can anyone advice ?

  • 4
    a `javascript:void(0)` works nicely. – Andrew Barber Apr 08 '14 at 14:58
  • 7
    you can remove the href then just do `a:hover{ cursor: pointer; }` in css – Brian Glaz Apr 08 '14 at 14:59
  • 3
    If it doesn't link anywhere it's not really a link... For that reason I prefer `cursor: pointer;` over `javascript:void(0)` and also because if JavaScript is disabled, the link will break. – André Dion Apr 08 '14 at 15:01
  • The reason for an empty `href` is probably the wish to disable a link, if so you could use CSS with `style="pointer-events:none;"` alternatively, see http://stackoverflow.com/a/32930539/1066234 – Avatar Jun 29 '16 at 10:50

5 Answers5

68

You can use javascript:void(0)

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

you don't need style="text-decoration:underline" as commented by King King

by jQuery you can do it by event.preventDefault()

Stop the default action of the event .

$('#ServerSort').click(function(event){
   event.preventDefault(); //or return false;
});
Community
  • 1
  • 1
Tushar Gupta - curioustushar
  • 58,085
  • 24
  • 103
  • 107
  • @KingKing roger that sir . – Tushar Gupta - curioustushar Apr 08 '14 at 15:02
  • 1
    Using `javascript:void(0)` is invalid -- http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-href – James Sumners Apr 08 '14 at 15:06
  • 4
    @jsumners it's just invalid to create a valid link, but of course using the `javascript:` prefix won't create any valid link, it just looks like a link, it allows you to run some script on clicking and in this case it does nothing on clicking. The feature of using `javascript:` prefix on an anchor is implemented by almost major browsers and I believe it will still be supported. – King King Apr 08 '14 at 15:14
  • @KingKing the point is that it _doesn't_ create a valid link. I'll let this do the explaining for me -- http://stackoverflow.com/a/1293130 – James Sumners Apr 08 '14 at 19:54
  • 3
    @jsumners And I also **agreed that it does not create a valid link**, understand? looks like **you did not understand my previous comment**. For the OP's requirement, he **obviously** does not want a valid link (from his comment **... force the link anchor using javaScript ... **), he wants something like clicking on the link will run some script, so using `javascript:` prefix is the correct choice, although it may not be the best because we can use another element and mimic the link instead and using `javascript:` prefix will require inline script which is not recommended. – King King Apr 08 '14 at 22:55
  • No, I don't understand. You can't say "it's just invalid to create a *valid link*" and then in the same sentence say "it's an invalid link". That makes as much sense as using an invalid protocol in the href attribute. – James Sumners Apr 09 '14 at 12:23
47

The best way to do that is to set the href to #0 like this:

<a href="#0">blabla</a>

Here's why: You will NEVER have anything on the page with the ID 0 (if you do, there's a problem there anyways), and since #0 doesn't exist, the click event doesn't bring you back to the top of page. You do NOT need JavaScript to do that and you should not use JavaScript.

Ivar
  • 6,138
  • 12
  • 49
  • 61
Bene
  • 1,875
  • 14
  • 14
  • Hey Bene, i tried this suggestion earlier, but for some reason this appends "#0" to existing url after click. eg "www.blabla.com/#0". Any thoughts ? – Nikhil Nanjappa Nov 10 '15 at 12:04
  • 1
    Well, if you do not prevent the action, it will add the href to the url, exactly as the browser always did. My answer meant to prevent the scroll-back-to-top behavior. What are you trying to do? – Bene Nov 17 '15 at 18:25
  • Worked Fine :) Suppressed react warning. – Samrat Saha May 11 '21 at 10:25
  • sublime and superior to the "javascript:void(0)" solution, thanks ! :) – suraj May 26 '21 at 03:39
7

 .clickable {
   cursor: pointer;
 }
 <a id="ServerSort" class="clickable">Foo</a>
Ruslan López
  • 4,433
  • 2
  • 26
  • 37
James Sumners
  • 14,485
  • 10
  • 59
  • 77
  • 1
    Ah I was typing up something similar at the same time. +1 - Pointers can be easily controlled using CSS no matter the element. If all you need is a pointer, you don't need an anchor element. A span with class="clickable" works just as well. – Daved Apr 08 '14 at 15:00
  • 1
    Except using the anchor still allows a real href attribute to be added at some point. – James Sumners Apr 08 '14 at 15:01
  • 2
    Hence why I metioned "if all you need is a pointer..." :) Definitely leave as anchor if href might be needed later. – Daved Apr 08 '14 at 15:02
  • using `href` will also give you keyboard focusability by default – SimplGy Jan 03 '18 at 23:42
6

Use Event.preventDefault()

This method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

function clickme(ev) {
  alert('You stay here!')
  ev.preventDefault()
}
<a onclick='clickme(event)' href='https://www.google.com/'>https://www.google.com</a>

The event continues to propagate as usual, unless one of its event listeners calls stopPropagation() or stopImmediatePropagation(), either of which terminates propagation at once.

Alternatively, you can use onclick='return false' (either inline or in a function). It will prevent default browser behaviour (more info):

function clickme() {
  alert('You stay here!');
  return false;
}
<a href="https://www.google.com/" onclick='return clickme()'>https://www.google.com/</a>

This approach prevents the event to propagate, though. More details.

Aray Karjauv
  • 2,679
  • 2
  • 26
  • 44
5

A few options exist:

<a id="ServerSort" href="javascript:">

<a id="ServerSort" href="javascript://">

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

These are considered bad practice and I would never recommend something like this for production. I typically use the first option when linking to pages that don't exist during the development phase.

Preferably, I would not use a at all, I switch to a span in example below:

<span id="ServerSort" onclick="return false">Test Link</span>

and just style an element accordingly:

    <style type="text/css">
    #ServerSort {
        text-decoration:underline;
    }
        #ServerSort:hover {
            color:red;
            cursor:pointer;
        }
</style>

I am in-lining the js and just hand writing a here to show a different approach which avoid the need to override the default behavior.

justinlabenne
  • 793
  • 3
  • 6