Firefox triggers click event on hidden input of type image, but Chrome does not

Question

Here is a JSFiddle snippet that illustrates the problem.

Inside a form, I have an input of type image inside a hidden div. That hidden div has a click event that triggers an alert (attached with jQuery). I also have a basic text input inside the same form.

On Chrome, when I press Enter in the text input, nothing happens. On Firefox, the alert is triggered, meaning that Firefox triggers a click event on the hidden div.

Which of Chrome and Firefox implements the correct behavior, and how to work around this issue on the browser that does not?

I am not sure that there is a "correct" behaviour here. But as pressing isn't, in my opinion, clicking I would put my money on Chrome. ;) — I'm with Monica, Oct 30 '13 at 16:46

score 4 · Accepted Answer · answered Oct 31 '13 at 06:25

Hitting enter in a single text input in a form submits the form. It does this by triggering a click event in some cases.

In Firefox, it seems to trigger a click event on the default submit control of the form, whatever that control is (and an image input can be a default submit control).

In Chrome it does the same, but only if the default submit control has a CSS box (which is why the display:none matters in Chrome).

Per the spec at http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#implicit-submission there should be no dependency on CSS here: the synthetic click activation steps are run no matter what, so Chrome's behavior is definitely wrong.

As for Firefox, the question is whether an image input is a "submit button". http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#image-button-state-%28type=image%29 says that in fact it is, so the Firefox behavior is the correct one in this case.

In terms of workarounds, one possible option is to explicitly set form="" on the image input if you don't want it submitting the form, which will make it not associated with the form and hence not the default submit button for it.

After two years! I found this to be very useful. Thank you Boris! — Moe, Aug 02 '16 at 14:40

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

I'm not sure what you are trying to accomplish with an input of type image. From what I have been able to find via Google (including this SO question), an image input is supposed to function like a submit button. If it is supposed to function like a submit button then I would assume that pressing enter on a form would submit it (hence the click event in FF). However, should it do so when the button is hidden? While I have not had time to look into that, it appears to be a browser implementation choice.

As far as a work-around, it depends on what you are trying to do (and if an input of type image is really the right way to go).

edited May 23 '17 at 11:59

Community

1
1

answered Oct 30 '13 at 20:13

Becuzz

6,846
26
39

Thanks for your input. Note that the problem is the same with an input of type `submit` instead of `image`, as you can see in this JSFiddle: http://jsfiddle.net/5j4kP/4/. I agree that this seems to be implementation-dependent. – François Beaune Oct 31 '13 at 09:37

Firefox triggers click event on hidden input of type image, but Chrome does not

2 Answers2