问题
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?
回答1:
Try doing:
<a href="javascript:void(0);">Home</a>
回答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
hrefattribute 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
hrefattribute. That works fine, but your page will not be valid anymore, since thehrefattribute is mandatory for a<a>tag. - Create your own directive, for instance
aEmpty, whose goal is simply to fill thehrefattribute 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.
回答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 */
来源：https://stackoverflow.com/questions/18080715/href-causes-location-address-to-change-can-we-avoid-it