Dans l'exemple suivant, lorsque vous cliquez sur l'étiquette, l'entrée change d'état.

document.querySelector("label").addEventListener("click", function() {
  console.log("clicked label");
});

label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<input type="checkbox" id="1">
<label for="1">Label</label>

Dans Chrome, lorsque vous déplacez le curseur entre les événements mousedownet mouseup, l'entrée est toujours déclenchée, tandis que dans Firefox, la case à cocher ne change pas d'état.

Y'a t'il un moyen d'arranger cela? (sans utiliser les écouteurs d'événement JavaScript)

Version de Firefox: 69.0.3 (64-bit)

Ensemble complet d'actions lors de l'utilisation de Chrome.

1. Appuyez sur le bouton sur l'étiquette
2. Déplacez le curseur (même en dehors de l'étiquette) tout en maintenant le bouton enfoncé
3. Remettez le curseur sur l'étiquette
4. Relâchez le bouton

introduction

Bien que j'aie spécifiquement indiqué dans la question que la réponse ne devrait pas impliquer JavaScript, toutes les réponses fonctionnaient avec JavaScript.
Étant donné que cela semble être un bogue de Firefox et que la plupart des réponses soumises à ce stade nécessiteraient que je modifie également le reste de mon code, j'ai décidé de créer un script qui peut être exécuté une fois, traitera toutes les étiquettes indépendamment du moment ils sont ajoutés au dom et auront le moins d'impact sur mes autres scripts.

Solution - Exemple

var mutationConfiguration = {
  attributes: true,
  childList: true
};

if (document.readyState === "complete") onLoad();
else addEventListener("load", onLoad);

var managingDoms = [];

function onLoad() {
  document.querySelectorAll("label[for]").forEach(manageLabel);
  if (typeof MutationObserver === "function") {
    var observer = new MutationObserver(function(list) {
      list.forEach(function(item) {
        ({
          "attributes": function() {
            if (!(item.target instanceof HTMLLabelElement)) return;
            if (item.attributeName === "for") manageLabel(item.target);
          },
          "childList": function() {
            item.addedNodes.forEach(function(newNode) {
              if (!(newNode instanceof HTMLLabelElement)) return;
              if (newNode.hasAttribute("for")) manageLabel(newNode);
            });
          }
        }[item.type])();
      });
    });
    observer.observe(document.body, mutationConfiguration);
  }
}

function manageLabel(label) {
  if (managingDoms.includes(label)) return;
  label.addEventListener("click", onLabelClick);
  managingDoms.push(label);
}

function onLabelClick(event) {
  if (event.defaultPrevented) return;
  var id = this.getAttribute("for");
  var target = document.getElementById(id);
  if (target !== null) {
    this.removeAttribute("for");
    var self = this;
    target.click();
    target.focus();
    setTimeout(function() {
      self.setAttribute("for", id);
    }, 0);
  }
}

label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px;
  border: 1px solid black;
  cursor: pointer;
}

<input type="checkbox" id="a">
<input type="text" id="b">
<label for="a">A</label>
<script>
  setTimeout(function() {
    var label = document.createElement("label");
    label.setAttribute("for", "b");
    label.textContent = "b";
    document.body.appendChild(label);
  }, 3E3);
</script>

Explication

onLabelClick

La fonction onLabelClickdoit être appelée chaque fois qu'une étiquette est cliquée, elle vérifiera si l'étiquette a un élément d'entrée correspondant. Si c'est le cas, il le déclenchera, supprimera l' forattribut de l'étiquette afin que les navigateurs n'aient pas le bogue ne le déclenchera pas à nouveau, puis utilisez un setTimeoutde 0mspour rajouter l' forattribut une fois que l'événement s'est propagé. Cela signifie qu'il event.preventDefaultn'est pas nécessaire d'être appelé et donc aucune autre action / événement ne sera annulée. De plus, si j'ai besoin de remplacer cette fonction, je dois simplement ajouter un écouteur d'événements qui appelle Event#preventDefaultou supprime l' forattribut.

manageLabel

La fonctionmanageLabelaccepte une étiquette vérifie s'il a déjà été ajouté un écouteur d'événements pour éviter de l'ajouter à nouveau, ajoute l'écouteur s'il n'a pas déjà été ajouté et l'ajoute à la liste des étiquettes gérées.

onLoad

La fonction onLoaddoit être appelée lorsque la page est chargée afin qu'elle manageLabelpuisse être appelée pour toutes les étiquettes du DOM à ce moment. La fonction utilise également un MutationObserver pour intercepter toutes les étiquettes ajoutées après le lancement de la charge (et l'exécution du script).

Le code affiché ci-dessus a été optimisé par Martin Barker .

Je sais que vous ne vouliez pas d'écouteurs JS Event, mais je pense que vous voulez identifier le mouvement, ce n'est pas le cas, mais utilisez mousedown au lieu de cliquer (mousedown suivi de mouseup).

Bien qu'il s'agisse d'un bug connu dans Firefox, vous pouvez le contourner en utilisant l' événement mousedown

J'ai dû changer votre identifiant pour être un identifiant valide doit commencer par un caractère

document.querySelector("label").addEventListener("mousedown", function(evt) {
  console.log("clicked label");
  // if you want to to check the checkbox when it happens,
  let elmId = evt.target.getAttribute("for")
  let oldState = document.querySelector("#"+elmId).checked;
  setTimeout(() => {
    if(oldState == document.querySelector("#"+elmId).checked){
      document.querySelector("#"+elmId).checked = !oldState;
    }
  }, 150)
});

label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<input type="checkbox" id="valid_1">
<label for="valid_1">Label</label>

Non. Cela ressemble à un bogue firefox et non à un problème avec votre code. Je ne crois pas qu'il existe une solution de contournement CSS pour ce comportement.

Vous pourrez peut-être le signaler à Mozilla et résoudre le problème, mais je ne m'y fierais pas. https://bugzilla.mozilla.org/home

Pour une solution de contournement potentielle, je suggérerais plutôt de déclencher l'événement sur mouseup.

Sans javascript, lorsque vous cliquez sur l'étiquette dont la valeur "pour" est identique à la valeur "id" des entrées, l'entrée est cliquée, mais cela n'est pas cohérent entre les navigateurs.

Si un navigateur suit ce qui précède, votre événement de clic javascript annulera l'effet, ce qui finira par ne rien faire.

Une solution

Pour avoir une cohérence entre les navigateurs, vous pouvez adopter une stratégie différente: Onload change dynamiquement tous les attributs "for" pour "data-for", de sorte qu'il annule l'effet du navigateur d'origine. Ensuite, vous pouvez appliquer votre événement de clic à chaque étiquette.

var replaceLabelFor = function () {
    var $labels = document.querySelectorAll('label');
    var arrLabels = Array.prototype.slice.call($labels);
    arrLabels.forEach(function (item) {
      var att = document.createAttribute('data-for');
      att.value = String(this.for);
      item.setAttributeNode(att);
      item.removeAttribute('for')
    });
}

var applyMyLabelClick() {
  document.querySelector("label").addEventListener("click", function() {
    console.log("clicked label");
  });
}

// x-browser handle onload
document.attachEvent("onreadystatechange", function(){
  if(document.readyState === "complete"){
    document.detachEvent("onreadystatechange", arguments.callee);
    replaceLabelFor();
    applyMyLabelClick();
  }
});

Attacher l'événement au document et cibler l'élément dont vous avez besoin devrait trier ce problème.

$ (Document) .on ('click', '.item', function (event) {});

De la lecture de ce sujet dans le passé, il revient à Firefox de comprendre votre action comme une tentative de faire glisser l'élément, cependant, puisque la sélection de l'utilisateur est nulle, cela empêche simplement le comportement par défaut.

Ceci est basé sur des connaissances assez limitées mais il semble que ce soit un bug / bizarrerie connu et il y a quelques articles qui flottent autour de cela.