Aperçu personnalisé Problème

Question

J'ai fait le script suivant pour remplacer décrivant par défaut des navigateurs système:

* 
{ 
    margin: 0; 
    outline-color: #C79700; 
    outline-width: 1px; 
    padding: 0; 
} 

$('document').delegate('[tabindex]', 'focusin focusout mousedown', function(event) 
{ 
    var target = $(event.target); 

    switch(event.type) 
    { 
     case 'focusin': 
     { 
      var clicked = target.data('clicked'); 

      target.removeData('clicked'); 

      if (clicked) 
       target.css('outline-style', 'none'); 
      else 
       target.css('outline-style', 'solid'); 

      break; 
     } 

     case 'focusout': 
      target.css('outline-style', 'none'); 
      break; 

     case 'mousedown': 
     { 
      if (target.prop('tagName') === 'B') 
       target = target.parent(); 

      if (!target.is(':focus')) 
       target.data('clicked', true); 
      else 
       target.css('outline-style', 'none'); 

      break; 
     } 
    } 
}) 

Tout fonctionne parfaitement, mais j'ai un problème mineur: si activer une autre fenêtre (en réduisant au minimum le navigateur ou en utilisant ALT + TAB), le document perd le focus et donc l'élément ... alors, si je réactive la fenêtre du navigateur, les données ('clicked') sont évidemment fausses et si un élément [tabindex] est sélectionné, il est indiqué par le scénario.

Comment puis-je empêcher cela? J'ai essayé beaucoup de solutions sans succès. Y at-il quelque chose comme:

  if (clicked || browser-has-just-become-active) 
       target.css('outline-style', 'none'); 
      else 
       target.css('outline-style', 'solid'); 

Beaucoup de mercis!

Answer 1

Je suis sûr que vous pouvez utiliser:

window.onfocus 

ou pour IE:

document.onfocusin