href=“#” causes location address to change, can we avoid it?

Question

I have a number of tabs that I handle special logic so no location bar address change should occur. I have the following

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

This behaves as expected, i.e. it gives me the hand mouse pointer when hovering over the buttons but clicking on then starts the route change. I want to be able to stop this.

I tried just remove the href or setting href="", seemed to have some success but it gave unexpected results when hovering.

What is the best practice here? Do I have to remove the href? So then I will need to style the tab using CSS to give me the mouse pointer when hovering? If I do leave the href="#" in the link then this causes a change of routing which is not what I was looking for.

I actually handle my login in a ngClick for each tab. This logic must not change the route.

Any ideas?

Answer 1

Try doing:

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

Answer 2

If you don't use the <base> tag, you can simply use:

<a href="">Home</a>

Indeed, according to the documentation:

[...] the default action is prevented when href attribute is empty.

Well, the documentation is wrong, and the real behaviour is actually to prevent the default action when the href attribute is equal to page location. That's a problem when you're using <base>. In this case, you have two choices:

• Forget the href attribute. That works fine, but your page will not be valid anymore, since the href attribute is mandatory for a <a> tag.
• Create your own directive, for instance aEmpty, whose goal is simply to fill the href attribute of a real <a> with the current value of $location.path().

In all cases, you'd better to actually use CSS to style your link, because that's always a bad idea to rely on the default behaviour of the browsers.

Answer 3

Replace href with ng_click.

To get the hand mouse pointer, add the css style:

a { cursor: pointer ; }
a:hover   { color: #00c }  /* user hovers     */