I made the following script to override the browsers' default outlining system:
*
{
margin: 0;
outline-color: #C79700;
outline-width: 1px;
padding: 0;
}
$('document开发者_JAVA技巧').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;
}
}
})
Everything works perfectly but I have a minor issue: if I activate another window (by minimizing the browser or using ALT+TAB), the document loses the focus and so does the element... then, if I reactivate the browser window, data('clicked') is obviously false and if a [tabindex] element is selected, it is outlined by the script.
How can I prevent this? I've tried a lot of solutions without success. Is there something like:
if (clicked || browser-has-just-become-active)
target.css('outline-style', 'none');
else
target.css('outline-style', 'solid');
Many many thanks!
I'm pretty sure you can use:
window.onfocus
or for IE:
document.onfocusin
精彩评论