Odd Click Event Sharing

In Firefox, when a button element and an input[type=text] element share a form, and the button element has a click handler, then that click handler function will get fired when the user focuses on the input[type=text] and presses return. The first time, the event target will be the input[type=text] element, but the second time it happens, it'l be the button element.

Workaround: use input[type=button] instead.

Test page Workaround is included
Reported by: Isaac Z. Schlueter.

Mozilla, Opera | Reported on 16 October 2006.

This site heavily relies on bug reports created by its readers. Anyone can report a bug and be published.




Search reports by browser:

Atom RSS

Comments

(Add your own)

1 Posted by Sebastian Redl on 16 October 2006 | Permalink

Not exactly a bug, since it's behaviour by design. You'll observe the same behaviour with an input[type=submit].
The issue is quite simply that many web authors gave their submit button an onclick handler in order to do form validation and similar things. Pressing enter while focused on a control would, however, submit the form and circumvent such handlers. That's why they're called anyway.

The correct workaround is to give the button a type="button" attribute.

2 Posted by Sebastian Redl on 16 October 2006 | Permalink

Forgot to add: see also the HTML spec:
http://www.w3.org/TR/html4/interact/forms.html#edef-BUTTON
The type attribute on defaults to submit.

Tested some more. Konqueror 3.5.4 and Opera 9 behave consistently: they fire the click event, but they always have the button as the target.

So the real bug here is that, on the first call, Mozilla has the input element as the target. Note that this only happens if you don't add any text! If you write anything in the text field first, the button will be the target even on the first return.

Weird, but not very bad, I think.

3 Posted by Tino Zijdel on 17 October 2006 | Permalink

Also note that using an onclick handler on your submit-element to do form validation is actually bad practice; that's what the onsubmit event of the form-element is for.

Post a comment

Commenting guidelines:

  1. When quoting specs, articles or your own research, please include a URL of the document.
  2. Test your stuff. When reporting browser behaviour, make sure that your report is correct.

Yes