click-event doesn't fire if blur changes layout

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 thin开发者_运维技巧g 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?

You could attempt to display the warning before the change/blur events by polling a setInterval function, so that by the time you get to the ‘Cancel’ button the reflow has already occurred.

Or, you could catch onmousedown on the button instead of onclick as it will occur before blur. (Makes the button behave not-quite-as-expected though.)

But I'd probably simply try to make the warning not cause a reflow when it appears if possible, by leaving a blank space otherwise.