Odd Click Event Sharing

The Problem

When a text input field is in the same form as a <button> element, and the button element has a click handler, and you press return in the text input, it'll fire the button's click handler instead of submitting the form.

Example of the bug

Press return in the text field. The click event for the button will get fired.

A So-So Fix - Listen to focus and blur

In this example, the button gets a property called hasfocus when it's focused, and loses the property when it is blurred. Use this and the tagName to control the event.

An Even Better Fix

Just use <input type="button"> instead of <button>. Just declare that, if you need to trap click events on a button, then button and input[type=text] elements can't share a form, period.

contact me