JavaScript 点击返回
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21346340/
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
JavaScript onclick return
提问by krato
I am new to JavaScript and I'm still figuring things out.
我是 JavaScript 的新手，我还在想办法。
I already searched the web for this but I'm not quite sure what keywords should I use. I am creating some program with a random number using html and JS.
我已经在网上搜索过这个，但我不太确定应该使用哪些关键字。我正在使用 html 和 JS 创建一些带有随机数的程序。
So in my javascript (inside the tag) I have something like:
所以在我的 javascript（标签内）中，我有类似的东西：
var x;
function initRandom() { // I run this function at loading time (i.e: <body onload="initRandom();">)
x = Math.random();
}
function checkGuessedNumber() { // this just checks if the number guessed by the user is == to x and displays "correct" in a div if it is correct otherwise "incorrect"
}
So the main problems I am encountering is that
所以我遇到的主要问题是
- The html elements gets reset after submit. For example, the text fields becomes blank, the things I displayed in a div becomes blank. It just shows for a short period of time then gets reset
- After that, the generated number becomes a different number I think the html page loads once more every time I click submit. And I don't like that to happen.
- 提交后 html 元素被重置。比如文本字段变成空白，我在一个div中显示的东西变成空白。它只显示一小段时间然后被重置
- 之后，生成的数字变为不同的数字，我认为每次单击提交时，html 页面都会再次加载。我不喜欢这种情况发生。
What I am having confusions on is the return statement on the onClick() attribute and how is it different on without return. See examples below:
我感到困惑的是 onClick() 属性上的 return 语句以及它在没有 return 的情况下有何不同。请参阅以下示例：
CODE1:
代码1：
<form onsubmit="return checkGuessedNumber();">
<input type="text"> // input for the number
<input type="submit"> // click if already sure of input number above
</form>
CODE2:
代码2：
<form onsubmit="checkGuessedNumber();"> // notice no return here
<input type="text">
<input type="submit">
</form>
And finally if I'll just gonna put the checkGuessedNumberon <input type="submit" onclick="checkGuessedNumber();">OR having a returnbefore that.
最后，如果我只是要去把checkGuessedNumber上<input type="submit" onclick="checkGuessedNumber();">或有return之前。
回答by m59
Here's a live demo (click)of everything in this post.
这是本文中所有内容的现场演示（单击）。
First, don't use inline js (js functions in your html, like onclick). Read some of these results: Why is inline js bad?
首先，不要使用内联 js（html 中的 js 函数，例如 onclick）。阅读其中一些结果：为什么内联 js 不好？
Just for completeness, I'll explain how it works anyway:
为了完整起见，我将解释它是如何工作的：
This disables the submitnature of the button.
这将禁用submit按钮的性质。
<input type="submit" onclick="return false;">
Now, if you want to use a function, you still need to produce the above result, so:
现在，如果你想使用一个函数，你仍然需要产生上面的结果，所以：
<input type="submit" onclick="return foo()">
and foowill have to return false, so that return foo()is the same as return false:
并且foo必须返回false，因此与return foo()以下内容相同return false：
function foo() {
//do what you need to do;
return false;
}
I'll update this in a moment explaining the best practice, NOT using inline js.
稍后我会更新它，解释最佳实践，而不是使用内联 js。
The best element for a "button" is <button>, so I recommend that.
“按钮”的最佳元素是<button>，所以我建议这样做。
<button id="my-btn">Click Me!</button>
I gave it an id so that we can easily identify it in javascript. There are plenty of other ways to get element references, but that's another topic. Now, in javascript:
我给了它一个 id，以便我们可以在 javascript 中轻松识别它。有很多其他方法可以获取元素引用，但这是另一个主题。现在，在 javascript 中：
//get the element reference
var myBtn = document.getElementById('my-btn');
//this will make the button call function "foo" when it is clicked.
myBtn.addEventListener('click', foo);
function foo(event) {
//do whatever you want
}
If you assign an event listener to an element that has a default behavior, you can prevent the default behavior like this:
如果将事件侦听器分配给具有默认行为的元素，则可以像这样阻止默认行为：
//the "event" object is automatically passed to the event handler
function foo(event) {
event.preventDefault();
//do what you want here
}
