Creating a null hyperlink

Question

Hi,

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

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

But, the mouse pointer does not change to the hand symbol when we hover a mouse over the 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 not linking to any location, but the mouse pointer should change to the hand symbol on mouse hover over it ?

Thank You.

Answer 1

Return false from 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 add an event handler programatically, add something like this in your javascript onload section (e.g. window.onload()):

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

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

Link in HTML page:

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

Answer 5

It is more correct to create a span element, and modify css properties:

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

css

.link{cursor: pointer;}