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

时间:2013-10-30 16:38:13

标签: html google-chrome firefox

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

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

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

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

2 个答案:

答案 0 :(得分:4)

点击输入表单中的单个文本输入提交表单。它通过在某些情况下触发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="",这将使其与表单无关,因此不是默认提交它的按钮。

答案 1 :(得分:0)

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

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