Désactiver onclick sur les enfants de l'élément cliqué

**eleydet** · 27/10/2016, 21h14

Bonsoir,

Je cherche à créer des listes dépliantes avec un effet amusant. Je propose l'exemple ci-dessous.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
      <style>
        .deplier { list-style-type: '- '; }
        .plier { list-style-type: '+ '; }
        .deplier ul {
          height: 100%;
          transition: 0.3s;
        }
        .plier ul {
          height: 1px;
          transform: scale(0.1,0.01);
          transition: 0.3s;
        }
      </style>
  </head>
  <body>
    <ul>
      <li class="plier">Les jours
        <ul>
          <li><a href="j1.html">Lundi</a>
          <li><a href="j2.html">Mardi</a>
          <li><a href="j3.html">Mercredi</a>
          <li><a href="j4.html">Jeudi</a>
        </ul>
 
      <li class="plier">Les années
        <ul>
          <li><a href="a1.html">2016</a>
          <li><a href="a2.html">2015</a>
        </ul>
      <li class="plier">Les mois
        <ul>
          <li><a href="m1.html">Janvier</a>
          <li><a href="m2.html">Février</a>
          <li><a href="m3.html">Mars</a>
        </ul>
    </ul>
    <script>
      plier=function() {
        for (var i=0;i<document.getElementsByClassName("plier").length;i++) {
          document.getElementsByClassName("plier")[i].addEventListener('click', function() {
            this.className="deplier";
            deplier();
          });
        }
      };
      deplier=function() {
        for (var i=0;i<document.getElementsByClassName("deplier").length;i++) {
          document.getElementsByClassName("deplier")[i].addEventListener('click', function() {
            this.className="plier";
            plier();
          });
        }
      };
      plier();
    </script>
  </body>
</html>

Dans cet exemple, si on clique sur un lien, par exemple sur "mardi", la liste se referme. Or, je voudrais qu'elle reste dépliée, qu'elle ne se replie que si on clique sur "Les jours". J'ai bien trouvé une solution, mais je me demande qu'elle est la bonne façon de procéder, selon vous.

Merci par avance pour vos réponses.

**Watilin** · 27/10/2016, 21h24

La technique qui convient le mieux dans ton cas, c’est celle qu’on appelle la délégation d’évènement. En gros tu ne mets qu’un seul gestionnaire d’évènement, sur l’ancêtre commun à tous les éléments que tu veux gérer (en l’occurence la première <ul>), et tu agis en fonction de l’évènement passé en paramètre. Dans le code que tu as donné, tu ne gères pas ce paramètre.

La propriété target de l’évènement t’indique quel élément a reçu le clic en premier. Voici un exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.querySelector('ul').addEventListener('click', function (ev) {
  console.log(ev.target);
});

**NoSmoking** · 27/10/2016, 21h43

Bonjour,
une petite remarque complémentaire, tu vas droit dans le mur car à chaque click sur un élément tu lui ajoutes un nouvel « listener », c'est sans fin...

Tu aurais aussi avantage à utiliser un toggle de la classe via le CSS.

[EDIT]

Dans cet exemple, si on clique sur un lien, par exemple sur "mardi", la liste se referme.

enlève moi d'un doute, après avoir cliqué sur le lien ta page est donc bien remplacée ?

**Beginner.** · 27/10/2016, 22h25

Salut,

Sujet intéressant et je vois qu'il y a des effets... J'ai testé et au bout d'un moment ça ralenti énormément (ça bloque un certain temps...). Je pense que c'est lié à la remarque de NoSmoking...

Sinon ne serait-ce pas une bonne idée d'ajouter un listener seulement au "+" et "-" ?

Mais bon ce que propose Watilin doit être mieux je pense...

**eleydet** · 27/10/2016, 22h37

Bonsoir,

C'est amusant, la solution que j'ai mis en oeuvre et que je vous présenterai bientôt est différente de celles que vous me proposez.

@ NoSmoking :

enlève moi d'un doute, après avoir cliqué sur le lien ta page est donc bien remplacée ?

La page est bien remplacée, mais on peut y revenir en cliquant sur le bouton "Reculer d'une page" du navigateur.

Tu aurais aussi avantage à utiliser un toggle de la classe via le CSS.

Je vais me documenter et essayer cette solution.

@ Watilin :
Là, j'ai un peu plus de mal à comprendre...

**eleydet** · 27/10/2016, 22h48

Bonsoir,

@ Beginner :

Sinon ne serait-ce pas une bonne idée d'ajouter un listener seulement au "+" et "-" ?

Là non plus, je ne comprends pas.

**Beginner.** · 27/10/2016, 23h09

Tout d'abord n’oublie pas la remarque de NoSmoking, je pense qu'il a raison il y a un problème... Comme je disais : j'ai testé et au bout d'un moment ça ralenti énormément (ça bloque un certain temps...).

Oui car là cela ajoute des listener chaque fois que les fonctions plier() et deplier() sont exécutées...

Envoyé par eleydet

Bonsoir,

@ Beginner :

Là non plus, je ne comprends pas.

Ben actuellement tu ajoutes des listener aux éléments qui ont la class plier ou deplier (et cela se répercutent à leur enfants) alors je me demandais si ce serait une bonne idée d'ajouter un listener seulement aux caractères "+" et "-", d'ailleurs certains mettent des images à la place... Comme ça le pliage et dépliage ne se fait qu'aux cliques sur ces "+" et "-"...

Mais bon, comme je disais, ce que propose Watilin doit être mieux je pense... Car c'est plus polyvalent...

Désactiver onclick sur les enfants de l'élément cliqué

JavaScript

Vue hybride

Discussions similaires

Partager

Partager