2011-07-28 13 views
2

概要私は、ブラウザのデフォルトのアウトラインシステムを無効にするために、次のスクリプトを作っ:カスタム問題

* 
{ 
    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; 
     } 
    } 
}) 

すべてが完璧に動作しますが、私はマイナーな問題を持っている:私は、ブラウザを最小限に抑えるか、ALTを使用して(他のウィンドウをアクティブにした場合+ Tab)、ドキュメントのフォーカスが失われ、要素も...ブラウザウィンドウを再びアクティブにすると、データ( 'clicked')は明らかにfalseで、[tabindex]要素が選択されている場合、スクリプト。

どうすればこの問題を防ぐことができますか?私は成功せずにたくさんのソリューションを試しました。次のようなものがありますか:

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

多くのありがとうございます!

答えて

2

私はあなたが使用することができますかなり確信している:

window.onfocus 

またはIE用:

document.onfocusin 
関連する問題