Make the OnMousedown event to be triggered only after the OnBlur event is triggered

Question

We have a HTML screen that is formed by including the two sections below:

1. Footer - A bar with icons that includes an Update button. The update button has the onmousedown event associated with it. When the Update button is clicked the data present in the Body is saved in the database.

2. Body - HTML form with 2 input fields. Each of these fields has an onblur event associated with it. The OnBlur actions consists of validations that must be run prior to running the Update action.

The problem is that sometimes the OnMouseDown event and henceforth the Update action is getting triggered prior to running the actions associated with the OnBlur events. This is causing the validations that are bound with each field to be run after the Update is performed.

This behaviour is occurring when I am on one of the Body fields (so the focus is on one of the Body section fields) and I click on the Update button.

What are your suggestions to solve this problem?

Answer 1

if all those actions should happen one after the other, why not binding all of them to onClick for example?

Answer 2

You could use the onFocus event in various ways to ensure that the onBlur has completed.

I'm imagining something along the lines of throwing out onMouseDown and just putting a check in onFocus to see if the mouse button is currently down. Check out this link for a decent implementation of how to check if the mouse button is down.

Alternatively, however, I gotta mention that you might be getting yourself into trouble if you are only looking for onMouseDown. What happens if a user tabs over to the button and hits spacebar or enter?