Question

我在HTML规范中没有发现任何关于如果某个输入错误类型的onclick处理程序的浏览器（Google Chrome，FF，IE和Opera都在最新版本中）必须表现如何，所以我是问你，专家：）

我使用了下面的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-handler，唯一的区别是段落的文本，即更改。

当您单击第一个按钮时，段落的文本将被更改，整个页面将重新加载，从而产生一个空段落。当您单击第二个按钮时，一切都按预期运行，段落的文本只是更改 - 没有重新加载。

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

Answer 1

您的按钮正在重新加载页面，因为它们位于<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>

这应该可以做到！

Answer 2

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

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

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

Chrome，FF，IE和＆amp ;;输入中类型属性的奇怪行为歌剧

2 个答案: