0

我在 HTML 规范中没有发现任何关于浏览器（Google Chrome、FF、IE 和 Opera 都在最新版本中）如果在输入类型错误的输入上存在 onclick 处理程序的行为，所以我在问你，专家:)

我使用了以下 html 并想象浏览器给了我某种错误（可能只是在开发者控制台日志中），但它只是重新加载了整个页面！

<!DOCTYPE html>
<html>
<body>
    <form class="form-inline">
        <button type="button color" onclick="document.getElementById('magic').innerHTML='clicked broken button'">Broken Button</button>
        <button type="button"       onclick="document.getElementById('magic').innerHTML='clicked button'"       >Button</button>
    </form>
    <p id="magic"></p>
</body>
</html>

如您所见，第一个按钮的类型错误，而第二个按钮的类型正确。两个按钮都有几乎相同的 onclick 处理程序，唯一的区别是段落的文本发生了变化。

当您单击第一个按钮时，段落的文本会更改并且整个页面会重新加载，这会导致一个空段落。当您单击第二个按钮时，一切都按预期进行，并且段落的文本只是更改了 - 无需重新加载。

那么，你能告诉我为什么重新加载整个页面是所有 4 个主要浏览器的默认行为吗？浏览器不应该提示输入错误的按钮（可能通过在开发人员控制台日志中打印错误消息）。对我来说，这很令人困惑:(

4

2 回答 2

1

您的按钮正在重新加载页面，因为它们位于 a 内<form>，因此它的行为就像正在提交表单一样。

return false;在末尾添加第一个onclick.

<form class="form-inline">
    <button type="button color" onclick="document.getElementById('magic').innerHTML='clicked broken button'; return false;">Broken Button</button>
    <button type="button"       onclick="document.getElementById('magic').innerHTML='clicked button';"       >Button</button>
</form>

这应该够了吧！

于 2013-03-28T10:51:44.660 回答
0

元素type属性的默认值为。这意味着当单击这样的元素时，首先执行事件处理程序，然后（除非处理程序禁止这样做）提交表单。在实践中，浏览器默认元素的属性为页面的 URL，因此在这种情况下会重新加载页面。buttonsubmitonclickactionform

在代码中，type="button color"语法错误并被忽略，因此type=submit应用默认值。属性规范type="button"是正确的，使button元素成为一个“纯按钮”，这样点击它就只有脚本效果，没有表单提交。

如果您希望以button特殊方式设置某些元素的样式，请使用class属性，例如<button type="button" class="color">. 该type属性仅将一组有限的关键字作为其值，每个关键字都有一个固定的含义。

于 2013-03-28T11:56:55.383 回答