javascript 如何在子窗口打开时停止刷新父页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33460296/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to stop refreshing parent page while child window open?
提问by lokesh purohit
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>
回答by trincot
Your page refreshes because not only is your function called, but also the
hyperlink indicated by the atag is executed. So you have two things happening
at the same time:
您的页面刷新是因为不仅调用了您的函数，而且还a执行了标记指示的超链接。所以你有两件事同时发生：
- the hyperlink itself navigates to whatever is in the
hrefattribute, even if it is empty. Ifhrefis empty it means: reload this page. - the
onclickevent handler also does something (opening a popup), but it does currently not cancel the first effect.
- 超链接本身导航到
href属性中的任何内容，即使它是空的。如果href为空，则表示：重新加载此页面。 - 该
onclick事件处理程序也做一些事情（打开一个弹出式），但当前不取消第一效果。
In a first reaction one might just remove the offending hrefattribute. 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.
在第一反应中，人们可能只是删除了有问题的href属性。这解决了这个问题，但又引入了另一个问题：显示的超链接文本上的所有漂亮样式都丢失了（例如下划线、颜色、更改光标、Tab 键顺序等），这通常不是您想要的。
Here are some more convenient solutions:
这里有一些更方便的解决方案：
Let the onclickevent handler return false
让onclick事件处理程序返回false
Returning falsewill cancel the anchor's default behaviour and the content of the hrefattribute will be ignored:
返回false将取消锚点的默认行为并且href属性的内容将被忽略：
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 urlin the hrefattribute, like:
如果您关心没有 javascript 支持（或已禁用）的浏览器，则url在href属性中放置一个有意义的后备，例如：
href="javascript_is_required.html"
Use event.preventDefault
利用 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:
这是return false. 它的优点是你可以让它作为第一条指令执行，这样如果在其他代码中发生运行时错误，它已经完成了它的工作：
onclick="event.preventDefault();ShowPopup('popup_login.asp');"
Note that this eventobject is defined by all browsers in the context of event attributes,
and is to be distinguished from the window.eventobject, which is not supported by
all browsers.
注意这个event对象是所有浏览器在事件属性上下文中定义的，要区别于window.event对象，不是所有浏览器都支持。
Use hash notation in href
在中使用哈希符号 href
Give the anchor a name
and then reference that name in the hrefattribute. This way
the anchor will navigate itself into view, which
it usually already is when the user clicked it:
为锚点命名，然后在href属性中引用该名称。这样，锚点将自己导航到视图中，通常在用户单击它时就已经是这样了：
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 urlchanges and the
previous urlis 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.
您经常会看到较短的变体href="#"，但这会在单击时将页面滚动到顶部，如果您确定页面没有向下滚动，这可能没问题。尽管如此，“#”的使用有一个副作用：当点击url更改时，前一个url被放在浏览器的历史堆栈中。因此，如果在单击链接后按后退按钮，您将停留在页面上。这可能是不希望的。
Use the javascript:protocol to do nothing
使用javascript:协议什么都不做
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);
这将使超链接执行冒号后面的任何 javascript，并且由于那里没有任何 javascript，因此不会发生任何事情。浏览器历史记录不会被修改。此方法有多种变体，例如javascript: return false;或javascript: void(0);
Use the javascript:protocol to handle the clickevent
使用javascript:协议处理click事件
With this solution you no longer use the onclickattribute. Instead you move the code
to the hrefattribute:
使用此解决方案，您不再使用该onclick属性。相反，您将代码移动到href属性：
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: HTMLis mixed with javascriptcode. It is better to separate these two.
原来的代码和上面所有的解决方案，还有一个很多开发者不喜欢的问题：HTML与javascript代码混在一起。最好把这两个分开。
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 clickevent 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 hrefattribute 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 eventobject instead.
一些人会说这也有一个缺点：识别单击时执行的代码更加困难。上面的代码将事件处理程序附加到clickmylink 元素的事件上。确保仅在文档加载后才执行它。事件处理程序以两种方式取消默认的点击行为。选择您喜欢的一种，或者如果需要，两者都可以。当它被取消时，href永远不会执行到属性值的导航。第一行处理浏览器细节，因为旧的 IE 浏览器不会将事件对象作为参数传递给事件处理程序，而是公开一个全局event对象。
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. jQueryoffers good cross browser support
for this with .on().
如果您不必支持 IE9 之前的浏览器，您可以在上面的代码中使用addEventListener('click', myfunction);代替来改进更多
onclick = myfunction;。这有很多好处：可以为同一个事件附加更多的事件处理程序，也可以将它们一一删除。.on()jQuery为此提供了良好的跨浏览器支持。
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.
上述解决方案有多种变体，各有优缺点。为此，您甚至可以不再使用锚点，而是使用另一个元素来代替添加样式的元素。
回答by Kartheek
Write return false();after the window.open()JS method.
false();在window.open()JS方法之后写return 。
In case the above snippet is not working, change the default <button>tag to normal <input>tag with type="button". This will solve the problem.
如果上述代码段不起作用，请将默认<button>标签更改为<input>带有type="button". 这将解决问题。
Below is the code snippet:
下面是代码片段：
JavaScript
JavaScript
<script>
function tagedlist() {
window.open("http://w3schools.com","mywindow","menubar=1,resizable=1,width=1000,height=1000");
return false;
}
</script>
回答by sojim
Just adding type="button"in <button>tag worked. I know it's redundant but it worked!
只需添加type="button"在<button>标签的工作。我知道这是多余的，但它有效！
From this:
由此：
<button id="btnDeleteRequest" class="btn btn-default" accesskey="D" onclick="ExecuteCommand('DeleteRequest',this);">
To this:
对此：
<button id="btnDeleteRequest" class="btn btn-default" type="button" accesskey="D" onclick="ExecuteCommand('DeleteRequest',this);">
