Quand un événement mousedown et mouseup ne correspond pas à un clic

Question

J'utilise depuis quelques temps des boutons qui ont un effet dépressif car ils sont cliqués en utilisant la position relative et un top: 1px dans la pseudo-classe active .

J'ai rencontré des problèmes de non-déclenchement des événements de clic et il s'est avéré que les événements mousedown et mouseup ne se produisaient pas sur le même élément. J'ai fait un peu de tripoter pour m'assurer que l'élément le plus à l'intérieur couvrait tout le bouton et découvert que le problème restait.

Si je clique à droite en haut du texte, alors le lien saute (déclencher l'événement mousedown) et ensuite sauvegarder (déclencher l'événement mouseup) mais le clic ne se produit pas. Si je clique joliment au milieu du texte ou joliment loin du texte tout va bien. La seule chose que je peux penser ici est que l'événement mousedown tire sur le textNode et le mouseup tire sur l'élément d'ancrage comme le textNode n'est plus sous le curseur. Attraper les objets de l'événement et regarder les cibles en utilisant firebug indique que ce n'est pas le cas mais je ne peux vraiment pas penser à une autre explication. En lisant un peu, je peux trouver quelques évidences sur les événements qui se déclenchent sur textNodes dans Safari mais rien sur cette discordance.

L'extrait de code suivant devrait vous permettre de répliquer le problème. Rappelez-vous, vous devez cliquer à droite en haut du texte, ou un pixel ou deux ci-dessus, et ce problème se produit uniquement avec une ligne de pixels:

<style> 
a.button-test { 
display: inline-block; 
padding: 20px; 
background: red; 
} 
.button-test:active { 
position: relative; 
top: 1px; 
} 
</style> 
<a class="button-test" href="#">Clickedy click</a> 

déconner avec le CSS, ne pas utiliser inline-block, augmenter la hauteur de la ligne au lieu du rembourrage, etc. ne semble pas avoir d'effet ici. J'ai essayé plusieurs combinaisons. La plupart de mes tests ont été effectués dans Firefox pour me permettre de me lier aux événements et d'enregistrer ce qui se passe à travers firebug mais je rencontre aussi ce problème dans d'autres navigateurs.

Quelqu'un a-t-il de l'inspiration à offrir à cet égard plutôt que de perdre le saut actif? J'aimerais vraiment garder cet effet si je le peux.

Un grand merci,

Dom (sans jeu de mots)

Answer 1

Il est beaucoup plus facile de reproduire ce problème si vous changez le style top: 10px

Answer 2

Voici ma solution à l'aide d'un événement personnalisé avec jQuery

var buttonPressed; 
// Track buttonPressed only on button mousedown 
$(document).on('mousedown', 'button', function (e) { 
    // Make sure we store the actual button, not any contained 
    // element we might have clicked instead 
    buttonPressed = $(e.target).closest('button'); 
}); 
// Clear buttonPressed on every mouseup 
$(document).on('mouseup', function (e) { 
    if (buttonPressed) { 
     // Verify it's the same target button 
     var target = $(e.target).closest('button'); 
     if (target.is(buttonPressed)) { 
      buttonPressed.trigger('buttonClick'); 
     } 
     buttonPressed = null; 
    } 
}); 

$('button').on('buttonClick', function (e) { 
    // Do your thing 
}); 

Assurez-vous de ne pas gérer les événements click et buttonClick natifs.