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');

大変感謝します！

4

1 に答える 1

2

私はあなたが使用できると確信しています：

window.onfocus

またはIEの場合：

document.onfocusin
于 2011-09-08T13:19:47.987 に答える