Firefox focus event madness

Firefox focus event madness

Hi,

I have a Div that I want to make editable when clicking it or when tabbing into it if tabindex is set.

Logially I place a focus event handler on the the div as well as a click event listner triggering the focus as the focus event is not triggered when clicking a control that doesnt have a tabindex.

In the focus event handler I set editable='true' using attr().

Now when I click or by any other means (such as by code or tabbing) focus on the div, it becomes editable and I get a cursor in it. This goes for IE7, Chrome and my FF3.5 while not having a tabindex set.

As soon as I set a tabindex to the div FF suddenly triggers the same events and runs the same code but no cursor appears and I have to click an extra time to edit it (even though it has changed to editable='true') and still no cursor.

BUT! If I make a link run javascript to set focus to the Div. Everything works like a charm.

What mad events are triggered to set the focus inside the editable div?
If I set return false; inside the focus event handler after setting it to editable clicking still works but the link running javascript now fails to "focus for real" on the control. This makes me believe that there are more events getting triggered that I am missing. Which ones?

This is especially interesting as I was convinced that the focus event shot NOT bubble, ever, in any browser. Which in my head would mean that a return false would do no difference.

Also the focus event can be seen triggered (bubbling?) on the divs parent div if one exists as well as on the body and html tag.

What am I missing? I am going insane here. Please help me!!! :)

Regards,
Joel

---Code below
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  5. <script type="text/javascript">
  6. function enable(){

  8. $('*').focus(function(){
  9. $('#textoutput').html($('#textoutput').html() + this.tagName + "." + this.className +".focus ");
  10. });
  11. $('*').click(function(){
  12. $('#textoutput').html($('#textoutput').html() + this.tagName + "." + this.className +".click ");
  13. });
  15. $('.textbox').focus(function(){
  16. $(this).attr('contentEditable', 'true');
  17. //return false;
  18. });
  19. $('.textbox').click(function(){
  20. $(this).focus();
  21. });
  22. $('.textbox').blur(function(){
  23. $(this).attr('contentEditable', 'false');
  24. });
  25. }
  26. $(function(){
  27. enable();
  28. });
  29. </script>

  31. </head>
  32. <body tabindex=-1>
  33. <div id='textoutput'></div>
  34. <div id='foo'>
  35. <div id="t2" class="textbox">
  36. text2
  37. </div>
  38. </div>
  39. <a href="javascript: var a=$('#t2').focus();">focus</a>
  40. </body>
  41. </html>