Firefox会在类型为image的隐藏输入上触发click事件，但Chrome不会

Question

Here is a JSFiddle snippet说明了这个问题。

在表单中，我在隐藏的image中输入了div类型的输入。隐藏的div有一个click事件触发警报（附带jQuery）。我在同一个表单中也有一个基本的文本输入。

在Chrome上，当我在文本输入中按Enter键时，没有任何反应。在Firefox上，触发警报，这意味着Firefox会在隐藏的div上触发click事件。

哪些Chrome和Firefox实现了正确的行为，以及如何在浏览器上解决此问题？

Answer 1

点击输入表单中的单个文本输入提交表单。它通过在某些情况下触发click事件来实现。

在Firefox中，它似乎在窗体的默认提交控件上触发了一个click事件，无论该控件是什么（并且图像输入可以是默认的提交控件）。

在Chrome中它也会这样做，但前提是默认的提交控件有一个CSS框（这就是display:none在Chrome中很重要的原因）。

根据http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#implicit-submission的规范，此处不应该依赖CSS：无论如何都会运行合成点击激活步骤，因此Chrome的行为肯定是错误的。

对于Firefox，问题是图像输入是否是“提交按钮”。 http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#image-button-state-%28type=image%29说实际上是，所以在这种情况下Firefox行为是正确的。

就变通方法而言，如果您不希望它提交表单，一种可能的选择是在图像输入上显式设置form=""，这将使其与表单无关，因此不是默认提交它的按钮。

Answer 2

我不确定你要用输入的图像输入来完成什么。根据我通过Google找到的内容（包括此SO question），图像输入应该像提交按钮一样运行。如果它应该像提交按钮一样运行，那么我会假设按下表单上的输入将提交它（因此在FF中的点击事件）。但是，隐藏按钮时是否应该这样做？虽然我没有时间研究它，但它似乎是浏览器实现的选择。

就解决方法而言，它取决于你想要做什么（如果输入类型图像真的是正确的方法）。