1
votes

Empêcher le clic sur l'étiquette de déclencher le bouton enfant

Lors d'une configuration comme celle-ci, cliquer sur une étiquette qui a un bouton enfant déclenche l'événement onclick du bouton:

<label>Label
  <button onclick="fireButton()">Button</button>
</label>
function fireButton() {
  console.log("Button fired!");
}

Est-ce qu'il y a un moyen d'éviter cela?


2 commentaires

C'est juste un modèle que vous devriez éviter au départ; les directives d'accessibilité communes déconseillent explicitement d'imbriquer de tels éléments interactifs qui ont leurs propres fonctionnalités dans des étiquettes.


accordé .. Je travaillerai sur un meilleur design à l'avenir.


5 Réponses :


2
votes

Vous pouvez mettre le bouton en dehors de l'étiquette

<label>Label</label>
<button onclick="fireButton()">Button</button>


0 commentaires

2
votes

Vous pouvez ajouter preventDefault pour les étiquettes et conserver le code existant:

document.querySelector("label").addEventListener("click", function(event) { 
    event.preventDefault();
}, false);


0 commentaires

2
votes

Ajouter pour attribut à étiqueter.

<label for=''>Label
  <button onclick="fireButton()">Button</button>
</label>
function fireButton() {
  console.log("Button fired!");
}


3 commentaires

Pour l'attribut associé à l'ID de son descendant. si vous ne souhaitez pas l'associer, définissez-le vide.


Cela l'a fait pour moi! Utilisation simple et efficace des fonctionnalités intégrées, même si ma conception est médiocre et mérite d'être refactorisée comme indiqué par @CBroe dans les commentaires stackoverflow.com/questions/64803356/...


Vous le concevez bien pour élaborer le problème. :-)



1
votes

Vous pouvez utiliser une balise différente, par exemple <span> plutôt que le label Mais si vous avez vraiment besoin d'utiliser le <label> , vous devez éviter le comportement par défaut du libellé onclick() comme ceci:

<label onclick="preventDefault(event)">Label
  <button onclick="fireButton()">Button</button>
</label>
function fireButton(){
//add actions here
}

function preventDefault(event){
  event.preventDefault()
}


2 commentaires

Je pourrais ajouter cette ligne dans le corps de fireButton () si je passais également l'événement, non?


Non, l'ajouter au fireButton() n'affectera pas le comportement de l'étiquette. Ce qui signifie que le clic sur le bouton sera toujours déclenché lorsque vous cliquez sur l'étiquette. Il faut donc que ce soit sur l'événement click du label @GugaFigueiredo



1
votes

Voici une approche en CSS qui désactive également l'état :active button déclenchement lorsque vous cliquez sur l' label . Redéfinition label de onClick événement ne fait pas.

label {
  pointer-events: none;
}
    
button {
  pointer-events: initial;
}


0 commentaires