Come rimuovere lo stato attivo sumousedown in IE?

Question

L'obiettivo finale: pagine carine per utenti di mouse, pagine accessibili per gli utenti di tastiera. L'effetto che voglio è quello di fare clic su un'ancora per non produrre alcun contorno durante e non lasciare nessun contorno dopo. Inoltre, voglio che i tasti della tastiera tocchino la messa a fuoco e quindi circondino gli oggetti con un contorno. Il seguente codice funziona in FF (e presumo gli altri browser moderni, ma dovrò testarli domani in ufficio), ma non IE6-8. Il problema sta nel fatto che onMouseDown non sembra offuscare come previsto:

var links = document.getElementsByTagName('a'); 
for (var i=0; i < links.length; i++) { 
    links[i].onmousedown = function() { 
     this.blur(); 
     return false; 
    } 
    links[i].onclick = function() { 
     this.blur(); 
    } 
} 

Un compromesso sarebbe se qualcuno ha una soluzione in grado di gestire il caso in IE, dove l'utente posiziona il mouse verso il basso, posiziona il mouse all'esterno ancorare, poi rialzare e non lasciare alcun contorno dietro sarebbe un passo nella giusta direzione. Grazie.

EDIT: venerdì 5 marzo 2010 Le mie più profonde scuse per aver impiegato così tanto tempo per tornare a questo, ma avevo bisogno di una soluzione che funzionasse nel maggior numero di browser possibile. Bene, non è necessario alcun timeout solo per alcuni schemi, classi e gestione dei focus. La seguente soluzione funziona con IE6 +, FF2 +, Safari 3+ e Chrome. Non ho provato in Opera, ma mi piacerebbe se qualcuno potesse confermare/negare che funzioni. Quello che segue è più codice suedo che puro js. Lascio come esercizio per il lettore a implementare nel vostro quadro preferito:

var anchorEventIsMouse = true; 
$('a').mousedown(function() { 
    anchorEventIsMouse = true; 
    this.hideFocus = true; /* IE6-7 */ 
    this.style.outlineStyle = 'none'; /* FF2+, IE8 */ 
    this.addClass('NoOutline'); /* see click func */ 
    this.setFocus(); /* Safari 3+ */ 
    }); 
$('a').keydown(function() { 
    anchorEventIsMouse = false; 
    }); 
$('a').blur(function() { 
    this.style.outlineStyle = ''; 
    this.hideFocus = false; 
    this.removeClass('NoOutline'); 
    }); 
$('a').click(function(e) { 
    /* Adding class NoOutline means we only allow keyboard 
    * clicks (enter/space) when there is an outline 
    */ 
    if (!anchorEventIsMouse && this.hasClass('NoOutline')) { 
    e.stopEventPropagation(); 
    } 
    }); 

Answer 1

NON UTILIZZARE blur()!

Non è necessario spostare la messa a fuoco dall'orbita per modificarne l'aspetto.

In IE è possibile impostare la proprietà JS hideFocus per impedire che venga disegnato il profilo. Altri browser consentono l'override tramite la proprietà CSS outline.

Basta impostare quelli nel gestore mousedown. Probabilmente si può usufruire di ribollimento evento e farlo da un singolo gestore sul corpo:

event.srcElement && event.srcElement.hideFocus=true; // IE 
event.target && event.target.style.outline='none'; // non-IE 

e se si desidera supportare il passaggio tra la tastiera e il mouse, in mousedown allegare blur gestore che ripristina quelli di default (si' ll bisogno di e la chiusura sul target dell'evento).

Answer 2

Prova questa css per i link:

<style> 
    a {outline: none;} 

    a:hover, a:active, a:focus { 
     // styling for any way a link is about to be used 
    } 
</style> 

Maggiori informazioni qui:

http://css-tricks.com/removing-the-dotted-outline/

http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/

Answer 3

Non l'ho provato, b ut solito un ritardo sorta questo genere di cose fuori:

var links = document.getElementsByTagName('a'); 
for (var i=0; i < links.length; i++) { 
    links[i].onmousedown = function() { 
     window.setTimeout(function() { this.blur(); }, 0); 
     return false; 
    } 
    links[i].onclick = function() { 
     this.blur(); 
    } 
} 

La ragione di questo è, la maggior parte degli eventi fuoco sull'elemento prima che effettivamente guadagna messa a fuoco. Il timer ritarda la sfocatura fino a quando il filo è inattivo, pertanto la messa a fuoco sarà stata acquisita e può essere sfocata.

Alcuni browser supportano la proprietà CSS outline, che rimuoverà il profilo attivo se impostato su none, IE non, ma si potrebbe essere in grado di trovare una soluzione non-js per quei browser.

EDIT Onestamente, a volte non so dove va il mio cervello. È scomparso temporaneamente ma è tornato di nuovo. Non ha funzionato per te perché in un timer, this non punta correttamente all'elemento di destinazione.È possibile risolvere il problema in questo modo:

links[i].onmousedown = function() { 
    var self = this; 
    window.setTimeout(function() { self.blur(); }, 0); 
    return false; 
} 

A volte può tremolare il contorno sulla prima di rimuoverla, però, così mi consiglia di utilizzare la proprietà hideFocus per nascondere temporaneamente il contorno durante eventi del mouse:

links[i].onmousedown = function() { 
    var self = this; 
    this.hideFocus = true; 
    window.setTimeout(function() { self.blur(); self.hideFocus = false; }, 0); 
    return false; 
} 

Answer 4

C'è un suggerimento jQuery qui: How to remove anchor link's dotted focus outlines only for mouse events but not for keyboard tabbed navigation?

Answer 5

$("a").click(function() { 
    $(this).blur(); 
}); 
$("a").mousedown(function() { 
    $(this).blur(); 
}); 

Prova questa;)

Answer 6

Non ho idea se ciò possa essere d'aiuto ma, come nient'altro funziona, prova ad impostare lo stile in base agli eventi piuttosto che cercare di attivare un evento. Se è un mouseover (quindi un clic) mantieni la sottolineatura, se è un focus senza mouseover (uso della tastiera), quindi lascia il comportamento di sottolineatura lì.

Questo è un altro campo lungo, ma potrebbe valere la pena di provarlo.

Answer 7

Questo sembra funzionare. Nascondere il rettangolo di attivazione sul caricamento della pagina e attivarlo solo se utilizzano il tasto TAB. Se si fa clic su un link si spegne sul rettangolo di attivazione di nuovo:

document.onkeydown = checktab; 
function checktab(e) { 
    var tabKey=9; 
    var code=(e) ? e.which : window.event.keyCode; 
    if(code==tabKey){ 
     showOutline(true); 
    } 
} 

function showOutline(show){ 
    var links = document.getElementsByTagName('a'); 
    for (var i=0; i < links.length; i++) { 
     links[i].style.outline=(show) ? '' : 'none'; 
     links[i].onmousedown = function() {showOutline(false);}; 
     links[i].hideFocus=!show; 
    } 
} 

showOutline(false);