自定义大纲问题答案

【问题标题】：Custom Outline Problem自定义大纲问题
【发布时间】：2011-07-28 13:07:01
【问题描述】：

我制作了以下脚本来覆盖浏览器的默认大纲系统：

*
{
  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），文档会失去焦点，元素也会失去焦点......然后，如果我重新激活浏览器窗口，data('clicked') 显然是错误的，如果选择了 [tabindex] 元素，它会被脚本勾勒出来。

如何防止这种情况发生？我尝试了很多解决方案都没有成功。有没有类似的东西：

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

非常感谢！

【问题讨论】：

标签： javascript jquery css focus outline

【解决方案1】：

我很确定你可以使用：

window.onfocus

或者对于 IE：

document.onfocusin

【讨论】：