Menu
when i click link to open child window, parent page refresh automatically. how can i stop it?
parent page should not refresh while open child window. how to do this? please help me.
my code is as below given:
<html>
<head>
<title>login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var popup;
function ShowPopup(url) {
if(popup)
{
popup.close();
}
popup = window.open(url, "self", "toolbar=no,scrollbars=yes,location=no,statusbar=no,menubar=no,resizable=0,width=300,height=350,left = 0,top = 0");
popup.focus();
}
</script>
</head>
<body>
<a href="" onclick="ShowPopup('popup_login.asp')" style="color: #1686CC;">Sign In / Register</a>
</body>
</html>
838
Your page refreshes because not only is your function called, but also the
hyperlink indicated by the a tag is executed. So you have two things happening
at the same time:
href attribute,
even if it is empty. If href is empty it means: reload this page.onclick event handler also does something (opening a popup), but it
does currently not cancel the first effect.In a first reaction one might just remove the offending href
attribute. This solves the problem, but introduces another: you lose all the nice
styling on the displayed hyperlink text (like underline, color, changing cursor, tab order, ...),
which is generally not what you want.
Here are some more convenient solutions:
Let the onclick event handler return false
Returning false will cancel the anchor's default behaviour and the content of the href attribute will be ignored:
onclick="ShowPopup('popup_login.asp'); return false;"
If you care about browsers that have no javascript support (or have it disabled), then put
a meaningful fall-back url in the href attribute, like:
href="javascript_is_required.html"
Use event.preventDefault
This is an alternative to return false. It has the advantage that you can make it
execute as the first instruction, so that if a run-time error occurs in the other code
it will already have done it's job:
onclick="event.preventDefault();ShowPopup('popup_login.asp');"
Note that this event object is defined by all browsers in the context of event attributes,
and is to be distinguished from the window.event object, which is not supported by
all browsers.
Use hash notation in href
Give the anchor a name
and then reference that name in the href attribute. This way
the anchor will navigate itself into view, which
it usually already is when the user clicked it:
name="loginlink" href="#loginlink"
You will often see the shorter variation href="#", but this will scroll the page to the top
when clicked, which might be OK if you know for sure the page is not scrolled down.
Still, the use of "#" has a side-effect: when clicked the url changes and the
previous url is put on the browser's history stack. So if after clicking the link you press the back button,
you stay on the page. This may be undesired.
Use the javascript: protocol to do nothing
href="javascript:"
This will make the hyperlink execute any javascript following the colon, and since there
is none there, nothing will happen. The browser history is not modified. There are variations
to this method, like javascript: return false; or javascript: void(0);
Use the javascript: protocol to handle the click event
With this solution you no longer use the onclick attribute. Instead you move the code
to the href attribute:
href="javascript: ShowPopup('popup_login.asp');"
Separation of lay-out and code
The original code and all the above solutions still have an issue that many developers
do not like: HTML is mixed with javascript code. It is better to separate these two.
This can be done as follows:
<a href="javascript_is_required.html" id="loginLink"
title="Click here to log on"> ... </a>
...
<script>
document.getElementById('mylink').onclick = function(e) {
e = e || event; // cross-browser way to get event object
e.preventDefault(); // cancel the default click behaviour
ShowPopup('popup_login.asp'); // your custom code comes here
return false; // cancel the default click behaviour
};
</script>
A few will say this also
has a down-side: it is harder to identify the code that executes on a click.
The above code will attach the event handler to the click event of the mylink
element. Make sure to have it execute only after the document has loaded.
The event handler cancels the default click
behaviour in two ways. Choose the one you prefer, or both if you want. As it is
cancelled, the navigation to the href attribute value is never executed. The first
line deals with browser specifics as older IE browsers do not pass the event object
as an argument to the event handler, but expose a global event object instead.
If you don't have to support pre-IE9 browsers, you can improve more by using
addEventListener('click', myfunction); instead of onclick = myfunction; in the
above code. This has many advantages: more event handlers can be attached to the same
event, and you can also remove them one by one. jQuery offers good cross browser support
for this with .on().
There are several variations on the above solutions, all with their benefits and downsides. You could even step away from using an anchor for this purpose and use another element instead with styling added to it.
159
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
