Creating a null hyperlink

Question

I want to create a hyperlink that does not link to any page. When clicked, it executes the javascript function that I defined. So, I created the link as follows:

<a onclick="fun()"> SomeText </a>

But the mouse pointer does not change to a hand symbol when we hover over a link.

So, I changed the link to

<a href="#" onclick="fun()"> SomeText </a>

So now I get the hand symbol, but now the location in the address bar changes to <url> / # whenever I click on the link.

Is there a way to create a hyperlink that is not associated with any location, but the mouse pointer should change to a hand symbol when you hover over it?

Thanks.

Answer 1

Returns false from the onclick event:

<a href="#" onclick="fun(); return false;"> SomeText </a>

Answer 2

<a href="javascript:;" onclick="fun();">Some Text</a>
<a href="javascript:fun();">Some Text</a>

Answer 3

<a href="/SomePageWeDontWantToVisit" onclick="fun(); return false;">...</a>

Answer 4

You can also programmatically add an event handler, add something like this to the javascript download section (e.g. window.onload ()):

function clickHandler() {
  event.preventDefault();    
 // do some javascript stuff
}

document.getElementById("link").addEventListener("click", clickHandler, false);

Link to HTML page:

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

Answer 5

Rather, create a span element and change the css properties:

<span class="link" onclick="fun()"> SomeText </span>

CSS

.link {cursor: pointer;}