Problème: Firefox perd le premier événement de clic lorsqu'une zone de texte a le CSS suivant:

textarea:focus {
    resize: vertical;
}

Voir la démo: http://jsbin.com/wuxomaneba/edit?html,css,output

La solution est simple: supprimez le sélecteur :focus.

Cependant, j'aimerais savoir pourquoi cela se produit et existe-t-il d'autres règles ou situations CSS où cela peut se produire.

19
rwalter 21 juil. 2015 à 14:44

3 réponses

Meilleure réponse

Bien que cela ressemble à un bogue (merci de l'avoir signalé!), Généralement un événement de clic est envoyé à l'élément le plus profond qui a observé à la fois les événements mousedown et mouseup. Ainsi, vous pouvez de même «interrompre» l'événement de clic en déplaçant la zone de texte sur :focus (par exemple position:absolute; top: xxx) - c'est parce que l'ordre des événements est mousedown-> focus (met à jour la page Web) -> mouseup -> cliquez.

La propriété resize " qui n'est pas visible sur la page Web, mais utilisé par le navigateur pour implémenter l'interface utilisateur supplémentaire au profit de l'utilisateur. Je suppose que les modifications apportées à ce contenu interfèrent avec {{ X1}} détection d'événements, mais sans regarder cela dans une version de débogage, il est impossible de le dire avec certitude.

function logEvent(ev) {console.log(ev.type, window.getComputedStyle(document.querySelector("textarea")).resize)}

document.querySelector("textarea").addEventListener("mousedown", logEvent, false);
document.querySelector("textarea").addEventListener("focus", logEvent, false);
document.querySelector("textarea").addEventListener("mouseup", logEvent, false);
document.querySelector("textarea").addEventListener("click", logEvent, true);
textarea:focus{
  position:absolute; top: 500px;
  /*resize:vertical;*/
}
<textarea>click me</textarea>
0
Nickolay 27 août 2019 à 11:40

Le moyen le plus simple consiste à utiliser le focus jQuery. Pour moi, c'est plus simple mais efficace et applicable à tous les types de navigateurs.

Si vous le souhaitez, concentrez-vous sur le chargement de la page.

$( document ).ready(function() {
     $('#txtId').focus();
});
-2
WHAT IS WRONG WITH YOU 20 août 2019 à 08:22

En effet, lorsque vous cliquez sur le bouton de redimensionnement, vous ne vous concentrez pas sur la zone de texte mais sur le bouton de redimensionnement sur Firefox. Je ne sais pas s'il s'agit d'un bogue ou non, mais il semble que c'était prévu. La suppression de :focus supprime la nécessité de se concentrer sur la zone de texte, elle s'applique donc lorsque vous maintenez le bouton de redimensionnement, qui ne va que verticalement.

0
user2849211user2849211 15 nov. 2015 à 14:27