Click-event does not fire if blur changes layout

Question

I have a form with blurry events related to required fields. Then the “Cancel” button appears, which simply calls up the URL (the button is an image with a click-event).

When you exit one of the required fields on the page, a warning is written stating that the xy field is required. → this leads to a shift of the layout, that is, all the fields and buttons move a little due to the text inserted above.

The tricky thing is this: when the focus is in an empty but required field and you press the cancel button, a mandatory warning is written to the screen, but the click event on the cancel button does not work. I think this is due to a layout shift. The mouse cursor no longer hovers over a button because the button scrolls down.

Does anyone have a good idea how can I solve this?

Answer 1

You can try to display a warning before change / blur events by polling the setInterval function, so that by the time you get to the Cancel button, an overflow has already occurred.

Or you can catch onmousedown on a button instead of onclick , as it happens before the blur. (Makes the button behave differently than expected, though.)

But I would just try to make a warning that does not cause re-melting when it appears, if possible, leaving empty space otherwise.