<!doctype html>
<body>
<input onblur="alert('b');">
<button onmousedown="alert('m');">a</button>
</body>
For some reason blur seems to fire first on Firefox/IE (but mousedown s开发者_如何学运维eems 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.
What may be the explanation for this abnormality?
Based on W3C specs, which should be the standard behavior?
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
Oh gosh, that is a neverending story. I don't want to know how many hours I spent to figure that behavior correctly. As you mentioned, it behaves differently, so there actually is no "correct". However I'm not that much aware of the W3C spec about this particular instance (if there actuall is one?), but for know, you have to create some logic to have things fired in the correct order. It's pretty disgusting tho.
精彩评论