A href pointed to nowhere added # to url

I have a href which pointed to #

<a href="#" id="bla" >Bla<a>

I hav开发者_如何学Goe onclick function which displaying popup on click on that a href.

function doingClick()
{
   //display popup
   return false;
}

But after click symbol # every time added to the url in browser.

So for example if url was like that before I click on my link http://mywebsite.com

But after click on a href the url looking like that: http://mywebsite.com#

Is there any way to avoid such behavior?

To avoid this try adding return false;

<a href="#" onclick="doingClick(); return false;">Link</a>

You could also use void(0)

<a href="javascript:void(0)" onclick="doingClick();">Link</a>

There's a popular question related to this (small religious war!) at Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

<a href="#" id="bla" onclick="return doingClick()">Link</a>

Do not forget to return the return of your function. Otherwise you will just call it without suspending the subsequent events.

While there are other valid solutions, I personally prefer this shorter solution.

<a href="javascript:;">Link</a>

Another benefit is that this solution does not scroll to the top of the window.

So i think the better way of doing this is to remove href from a element

<a id="bla" class="href" >Bla</a>

and than to make it looks like a href just add simple css class

.href 
{
    color: #2289b8; //color of the link
    cursor: pointer;
}

This idea comes to me when i looked in to source of SO add comment button

Instead of adding a href, you could add a style="cursor:pointer;" this has the same effect of displaying it like a hyperlink, without the in-page anchor effect.

<a id="bla" onclick="return doingClick()" style="cursor:pointer;">Link</a>

The url is not pointed to nowhere. The URL is a relative URL to # in other words the URL resolves to <current_url># which in this case is http://mywebsite.com#.

To avoid this behaviour, you have to change the URL.

If you have a onclick-handler that returns false, then that should prevent the link being active :

<a href="#" onclick="return doingClick();">link</a>

You can also use javascript:void(0) as the link href.

In either case, be mindful of the decreased accessibility of your site when you use javascript to access some parts of it. Those users that have javascript disabled, doesn't have javascript enabled browsers or use a screenreader or other accessibilty tools may not be able to use the site.

If you don't get better answer, you could make nasty ugly workaround by placing script tag very early on page (on the beginning of body or in head) with following javascript:

if(document.location.href[document.location.href.length-1]=='#'){
    document.location.href = document.location.href.substring(0, document.location.href.length-2)
}

I DO NOT RECOMMEND you to do this as will cause double requests to server when # is in url, but it is here if you have to.

The # is used for linking the element ID's, and will always be added to your URL when used in "empty" hrefs. What you could do, if it REALLY annoys you, is to remove it from location.href in your doingClick function

A simple workaround would be set the href empty:

<a href="" id="bla" onClick="alert('Hi');">Bla<a>

Which still works.

If you want to keep the "events" that happens in href="#"

You can simply leave it empty: href=""