click-event doesn't fire if blur changes layout
- by rag
I have a form with blur-events bound to the required fields. Then there is a "Cancel" Button which simply calls an URL (button is an image with click-event).
When leaving one of the required fields a warning is written to the page saying that field xy is required. - this causes a layout shift, meaning all the fields and the buttons are moved down a little bit because of the text inserted above.
The tricky thing is this: when the focus is in an empty but required field and you click the cancel button, the required-warning is written to the screen but the click-event on the cancel button doesn't fire.
I think this is due to the layout shift. The mouse cursor doesn't hover over the button anymore, because the button scrolled down.
Has anyone a good idea how i could solve this?