Javascript 如何判断按钮是否被点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13436778/
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 tell if a button is clicked
提问by heinst
I have this code:
我有这个代码：
<script type="text/javascript">
function changestate()
{
var StateTextBox = document.getElementById("State");
var IgnoreTextBox = document.getElementById("Ignore");
var PlayButton = document.getElementById("Play");
if(document.getElementById("Play").onclick == true)
{
StateTextBox.value = "Happy";
}
}
</script>
<input TYPE="button" VALUE="Play with Pogo" id="Play" onClick="changestate();"/>
I'm trying to know when the button is clicked, and have that if button is clicked in the if statement. I want to know this so I can change the value that is inside the text box. The problem is, I do not know how to tell when the button is clicked. If you could help me out that would be great.
我想知道何时单击按钮，并在 if 语句中单击 if 按钮。我想知道这一点，以便我可以更改文本框中的值。问题是，我不知道如何判断按钮何时被点击。如果你能帮助我，那就太好了。
回答by Sampson
The onclickattribute identifies what should happen when the user clicks this particular element. In your case, you're asking that a function be ran; when the function runs, you can rest assured that the button was clicked - that is after all how the function itself got put into motion (unless you invoked it some other way).
该onclick属性标识当用户单击此特定元素时应发生的情况。在您的情况下，您要求运行一个函数；当函数运行时，您可以放心，该按钮已被单击 - 毕竟这是函数本身如何启动的（除非您以其他方式调用它）。
Your code is a bit confusing, but suppose you had two buttons and you wanted to know which one was clicked, informing the user via the stateTextBoxvalue:
您的代码有点令人困惑，但假设您有两个按钮，并且您想知道点击了哪个按钮，并通过stateTextBox值通知用户：
(function () {
// Enables stricter rules for JavaScript
"use strict";
// Reference two buttons, and a textbox
var playButton = document.getElementById("play"),
stateTextBox = document.getElementById("state"),
ignoreButton = document.getElementById("ignore");
// Function that changes the value of our stateTextBox
function changeState(event) {
stateTextBox.value = event.target.id + " was clicked";
}
// Event handlers for when we click on a button
playButton.addEventListener("click", changeState, false);
ignoreButton.addEventListener("click", changeState, false);
}());
You can test this code live at http://jsfiddle.net/Y53LA/.
您可以在http://jsfiddle.net/Y53LA/ 上实时测试此代码。
Note how we add event-listeners on our playButtonand ignoreButton. This permits us to keep our HTML clean (no need for an onclickattribute). Both of these will fire off the changeStatefunction anytime the user clicks on them.
请注意我们如何在playButton和上添加事件侦听器ignoreButton。这允许我们保持 HTML 干净（不需要onclick属性）。无论changeState何时用户单击它们，这两者都会触发该功能。
Within the changeStatefunction we have access to an eventobject. This gives us some details about the particular event that took place (in this case, the clickevent). Part of this object is the target, which is the element that was clicked. We can grab the idproperty from that element, and place it into the valueof the stateTextBox.
在changeState函数中，我们可以访问一个event对象。这为我们提供了有关发生的特定事件（在本例中为click事件）的一些详细信息。这个对象的一部分是target，它是被点击的元素。我们可以抓住id从元素属性，并将其放置到value的stateTextBox。
Here is the adjusted HTML:
这是调整后的 HTML：
<input type="button" value="Play with Pogo" id="play" />
<input type="text" id="state" />
<input type="button" value="Ignore with Pogo" id="ignore" />?
回答by Dionis Olen
You can know if button clicked by using a flag (true or false).
您可以通过使用标志（真或假）知道按钮是否被点击。
var flag = false;
window.addEventListener("load", changestate, false);
function changestate() {
var StateTextBox = document.getElementById("State");
var PlayButton = document.getElementById("Play");
PlayButton.addEventListener("click", function () {
flag = true;
})
PlayButton.addEventListener("click", change)
function change() {
if (flag) {
StateTextBox.value = "Happy";
}
}
}
回答by heinst
Looking back on this, many years later, you could simply do:
多年后回顾这一点，您可以简单地执行以下操作：
<script type="text/javascript">
function changestate(action)
{
var StateTextBox = document.getElementById("State");
var IgnoreTextBox = document.getElementById("Ignore");
var PlayButton = document.getElementById("Play");
if(action == "Play")
{
StateTextBox.value = "Happy";
}
}
</script>
<input TYPE="button" VALUE="Play with Pogo" id="Play" onClick='changestate("Play");'/>
