IIRC, according to the dom specs, blur is only called when an element
loses focus via pointer, blur() or tabbing.
In the strictest sense, when triggering a focus explicitly, you'll
also need to explicitly call blur if you want a blur event to happen.
On the on the other hand, I would agree that focus triggering a blur
on the previously focused element makes me sense.
On Wed, Jan 14, 2009 at 10:58 AM, Mark Gibson <jollyt...@gmail.com> wrote:
>
> I've only just noticed this, but the jQuery focus() method doesn't cause
> a blur event to trigger on the previously focused element.
> The code below demonstrates.
> You need to focus a list item by clicking on it and then using the
> up/down arrows to move the focus.
> The actual focus is moved as shown by the yellow background from the
> li:focus css rule, and the focus event is triggered as shown by the bold
> text. But the blur event is not triggered on the previous item.
> Clicking on another item will focus and blur as expected.
>
> If you swap the commented lines, blur seems to work:
> ie. $(ev.target).prev('li').focus();
> to: $(ev.target).prev('li').each(realfocus);
>
> This affects jQuery 1.3 and 1.2.6.
> To me this is a slap in the face for the principle of least surprise.
> Does jQuery.fn.focus() call .focus() on the element? if not then how is
> the refocusing actually happening?
> and why isn't blur being triggered?
>
> Regards
> - Mark Gibson
>
> <html>
> <head>
> <script type="text/javascript" src="jquery.js"></script>
> <script type="text/javascript">
> jQuery(function($) {
> function realfocus() { this.focus(); }
>
> $('ul')
> .bind('keypress', function(ev) {
> if ($(ev.target).is('li')) {
> console.log(ev.target);
> switch (ev.keyCode) {
> case 38: // Up
> $(ev.target).prev('li').focus();
> //$(ev.target).prev('li').each(realfocus);
> break;
> case 40: // Down
> $(ev.target).next('li').focus();
> //$(ev.target).next('li').each(realfocus);
> break;
> }
> }
> })
> .find('li')
> .bind('focus', function() {
> $(this).addClass('has-focus'); })
> .bind('blur', function() {
> $(this).removeClass('has-focus'); })
> });
> </script>
> <style>
> li:focus { background-color: yellow; }
> li.has-focus { font-weight: bold; }
> </style>
> </head>
> <body>
> <ul>
> <li tabindex="-1">One</li>
> <li tabindex="-1">Two</li>
> <li tabindex="-1">Three</li>
> <li tabindex="-1">Four</li>
> <li tabindex="-1">Five</li>
> </ul>
> </body>
> </html>
>
>
> >
>
--
---
David Zhou
da...@nodnod.net
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery Development" group.
To post to this group, send email to jquery-dev@googlegroups.com
To unsubscribe from this group, send email to
jquery-dev+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---
