Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Should blur or mousedown fire first?

<!doctype html>
<body>
<input onblur="alert('b');">
<button onmousedown="alert('m');">a</button>
</body>

For some reason blur seems to fire first on FF / IE (but mousedown seems to fire first for Chrome / Safari).

Yet when we change the code to this:

<!doctype html>
<body>
<input onblur="document.title+='b';">
<button onmousedown="document.title+='m';">a</button>
</body>

Now for some reason mousedown seems to fire first for all browsers.

1) What may be the explanation for this abnormality?

2) Based on W3C specs, which should be the standard behavior?

like image 201
Pacerier Avatar asked Aug 04 '11 09:08

Pacerier


People also ask

Does blur fire before click?

It looks like click event has lower priority than blur, so it is predictible behaviour that blur event fires first. This is has been something that has been an issue for me for awhile. Thanks for the answer.

Which event fires when a text element loses the focus?

The blur event fires when an element has lost focus. The main difference between this event and focusout is that focusout bubbles while blur does not.

How to prevent blur event?

If you want to prevent the blur event from being fired, you have to do so when you are inside the mousedown event, you can do so by invoking the method preventDefault() on the event. Click the checkbox, focus input & then click the button, the textfield never loses focus now.

What is focus and blur?

Events focus/blur The focus event is called on focusing, and blur – when the element loses the focus. Let's use them for validation of an input field. In the example below: The blur handler checks if the field has an email entered, and if not – shows an error.


1 Answers

So for this test I made this fiddle

<input onblur="document.getElementById('msg').innerHTML+=new Date().getTime()+' - blur<br/>'">
<button onmousedown="document.getElementById('msg').innerHTML+=new Date().getTime()+' - md<br/>'">a</button>
<div id="msg">---<br/></div>

On Windows XPsp3, in Fx5, IE8, Opera 11, Safari5, Chrome 13 it is ALL mousedown first, blur after

UPDATE: EXCEPT when you use alert. You cannot count on anything working the way you want them to if you put an alert somewhere.

For example some (older) browsers would go into a never ending loop if you alerted an error onblur and then tried to focus the offending field, which would then blur the empty next field

like image 59
mplungjan Avatar answered Oct 05 '22 23:10

mplungjan