为什么 onclick 在没有返回 false 的情况下不起作用答案

【问题标题】：Why onclick is not working without return false为什么 onclick 在没有返回 false 的情况下不起作用
【发布时间】：2015-10-04 11:24:33
【问题描述】：

为什么 onclick 方法在没有返回 false 的情况下不起作用。当我尝试在不返回 false 的情况下使用它时，它会显示答案，然后值消失..

<form id="form1" method="POST">
    <table style="border:1px solid black">
        <tr>
            <td>First Number</td>
            <td>
                <input type="text" id="first">
            </td>
        </tr>
        <tr>
            <td>Second Number</td>
            <td>
                <input type="text" id="second">
            </td>
        </tr>
        <tr>
            <td>Result</td>
            <td>
                <input type="text" id="result">
            </td>
        </tr>
        <td>
            <button id="btn" value="Add" onClick="addNumbers();return false;">Add</button>
        </td>
    </table>
</form>

Javascript：

function addNumbers() {
    var firstNumber = document.getElementById('first').value;
    var secondNumber = document.getElementById('second').value;

    document.getElementById('result').value = firstNumber + secondNumber;
}

JSFIDDLE

【问题讨论】：

你真的想把两个字符串加在一起吗？还是您更愿意将字符串转换为数字并添加它们？
加上回答你的问题stackoverflow.com/questions/128923/…

标签： javascript html

【解决方案1】：

为什么 onclick 方法不返回 false 就不起作用？

button在form里面的默认动作是点击按钮提交表单。为防止这种情况发生，您需要在单击按钮时使用e.preventDefault() 或return false。

为什么这些值会消失？

提交表单后，页面将重定向到提交表单的 URL。由于未提供action 属性，因此表单被提交到同一页面。并且由于未设置默认值，因此在重新加载页面时会清除这些值。

如何解决问题

您可以通过在 click 事件处理函数中使用 return false; 作为最后一条语句并在 HTML 中的函数之前的 onclick 属性之前添加 return 来阻止这种情况发生。

您忘记做的另一件事是在从 DOM 元素中读取值时将字符串转换为 Number。否则+ 将用作字符串连接 运算符，结果将是一个连接字符串。

您可以通过将+(unary + operator) 放在字符串前面来将字符串转换为数字。

更新小提琴：http://jsfiddle.net/tusharj/ufe7aqhw/

function addNumbers() {
  var firstNumber = +document.getElementById('first').value;
  var secondNumber = +document.getElementById('second').value;

  document.getElementById('result').value = firstNumber + secondNumber;

  return false;
}

<form id="form1" method="POST">
  <table style="border:1px solid black">
    <tr>
      <td>First Number</td>
      <td>
        <input type="text" id="first">
      </td>
    </tr>
    <tr>
      <td>Second Number</td>
      <td>
        <input type="text" id="second">
      </td>
    </tr>
    <tr>
      <td>Result</td>
      <td>
        <input type="text" id="result">
      </td>
    </tr>
    <td>
      <button id="btn" value="Add" onClick="return addNumbers();">Add</button>
    </td>
  </table>
</form>

旁注：

我会建议/推荐给

不要使用table来格式化UI，你可以使用div来简单的样式
将样式移动到单独的样式表中，不要使用内联样式
使用addEventListener绑定事件

【讨论】：

【解决方案2】：

因为return false用于停止onclick的默认动作，即提交表单。而且您显然还没有为您的表单定义 post 处理程序。所以如果你提交表单，你会得到一个错误。

【讨论】：