input `type=image` onclick 解决方案有效，但为什么呢？

Question

我在使用带有onclick 的输入type=image 标记来运行一些javascript 时遇到问题。与输入 type=button 完美配合，但是，当用于图像输入时，它将运行更改 DOM 的脚本（将图像添加到 div），但会在几分之一秒内清除回默认页面，添加图像显示为短暂的闪光然后消失。

所以，使用谷歌，我最终找到了解决方案。我改变了：

<input type="image" id="greenGoButton" src="Images2/goButton.png" alt="Submit" onclick="loopForm(document.thisForm); getPlates(document.thisForm);">

到：

<input type="image" id="greenGoButton" src="Images2/goButton.png" alt="Submit" onclick="loopForm(document.thisForm); getPlates(document.thisForm); return false;">

所以，添加 return false; 语句修复它。

但是为什么呢？这让我很烦。为什么在按钮上没有return false 时它可以工作，而在使用图像时却不行？当然，互联网上到处都是由图像组成的按钮。

Answer 1

默认情况下，type='image' 创建一个提交封闭表单并重新加载页面的按钮，通过在点击处理程序的末尾添加 return false，您告诉 Javascript 阻止提交表单的默认行为和重新加载页面。

您还可以访问点击处理程序中的事件对象，并在其上调用preventDefault()，而不用最后执行return false； event.preventDefault() 也做同样的事情。

简而言之，事件处理程序末尾的return false 可防止发生默认行为