web-dev-qa-db-fra.com

Empêcher un événement de mise au point lorsque vous cliquez sur div

Cette question est similaire à ma question précédente, Action sur Click sur Focused DIV , Mais cette fois, le sujet principal est, Comment empêcher un événement de focus de se déclencher lorsque je clique sur l'un des div . Dernière fois J'avais un div avec tabindex = '- 1' pour le rendre focalisable au clic, maintenant j'ai une liste de divs avec tabindex> 0 afin qu'ils puissent obtenir le focus lors de la tabulation.

<div tabindex='1'>Div one</div>
<div tabindex='1'>Div two</div>
<div tabindex='1'>Div tree</div>
<div tabindex='1'>Div four</div>

un peu de style:

div {
    height: 20px;
    width: 60%;
    border: solid 1px blue;
    text-align: center;
}
div:focus {
    border: solid 2px red;
    outline: none;
}

Maintenant, j'utilise un indicateur (action) pour déclencher une action (alerte) lorsque vous cliquez pour la deuxième fois sur le div, et d'un seul clic s'il est déjà centré, avec TAB par exemple.

var action = false;
$('div')
    .click(function(e){
        e.stopImmediatePropagation();
        if(action){alert('action');}
        action = true;})
    .focus(function(){action = true;})
    .blur(function(){action = false;});

Le problème avec le code ci-dessus est que l'événement de focus est déclenché, ce qui signifie que stopImmediatePropagation ne fonctionne pas comme prévu. L'action en deux clics fonctionne en commentant la ligne d'événement de focus, mais vous devez encore double-cliquer lorsque div gagne le focus sur l'onglet TAB . Voici l'exemple: http://jsfiddle.net/3MTQK/1/

javascriptjqueryjavascript-events
39
olanod

Pour empêcher simplement le focus de tirer en cliquant sur div, utilisez simplement mousedown + event.preventDefault(). Utilisez mousedown plutôt que de cliquer sur, car, comme l'explique @Selvakumar Arumugam , le focus se déclenche lorsque mousedown aboutit et que event.preventDefault () arrête les événements du navigateur (y compris notre focus).

Voici un exemple de code:

$('#div').on('mousedown', function(event) {
// do your magic
event.preventDefault();
});
11
justDoIT

Pour le moment, la solution apparente consisterait à restreindre votre sélecteur de simplement "div" à un système de noms de classes basculés, de manière à ce que vous puissiez contrôler l'élément sur lequel votre événement de focus se déclenche. C'est plus fastidieux et nécessite un peu plus de codage d'exception, mais ferait l'affaire.

0
Ken