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...

**Watilin** · 28/10/2016, 00h15

Les « + » et « - » sont des ajouts CSS list-style-type, un peu comme les pseudo-éléments ::before et ::after. Ils ne sont pas directement manipulables par script.

Pour apporter des précisions sur la technique de la délégation, tu as donc un unique listener qui reçoit un évènement en paramètre, et tu utilises la propriété target de ce dernier. Cette target, tu dois examiner sa classe. Si c’est "plier" tu la changes en "deplier", et réciproquement.

C’est plus clair ?

**Beginner.** · 28/10/2016, 15h15

Envoyé par Watilin

Les « + » et « - » sont des ajouts CSS list-style-type, un peu comme les pseudo-éléments ::before et ::after. Ils ne sont pas directement manipulables par script.

Ok mais on pourrait mettre ces carartères dans des span par exemple mais bon pas la peine c'est moins bien de toute façon que la solution que tu proposes...

Envoyé par Watilin

Pour apporter des précisions sur la technique de la délégation, tu as donc un unique listener qui reçoit un évènement en paramètre, et tu utilises la propriété target de ce dernier. Cette target, tu dois examiner sa classe. Si c’est "plier" tu la changes en "deplier", et réciproquement.

C’est plus clair ?

Personnellement, c'est comme ça que je l'avais compris d'ailleurs j'ai testé ici (ça sera peut-être plus clair avec un exemple...) : http://jsbin.com/xibulijobi/1/edit?js,console,output...

C'est plus court et plus simple en plus...

**Beginner.** · 28/10/2016, 16h23

Que pensez-vous des solutions uniquement en CSS ?

Exemples :
- https://makina-corpus.com/blog/metie...iew-en-css-pur
- https://acidmartin.wordpress.com/201...no-javascript/

**eleydet** · 28/10/2016, 22h17

Bonsoir,

Merci beaucoup pour vos commentaires. Pour ma part, je n'ai pas fini d'étudier ce sujet. J'avais écrit :

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.

Il est temps que je vous montre cette autre solution.

Code :

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
<!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>
      for (var i=0;i<document.getElementsByClassName("plier").length;i++) {
        document.getElementsByClassName("plier")[i].addEventListener('click', function(e) {    
          if (this.className=="deplier") { if(e.target===this) this.className="plier"; }
          else this.className="deplier"
        });
      }
    </script>
  </body>
</html>

**Beginner.** · 28/10/2016, 22h35

Moi aussi ce sujet m'intéresse, je devais m'y mettre...

J'ai testé ta solution ici : http://jsbin.com/favusaqawu/edit?html,output

Cela rejoint un peu ce que j'ai posté sauf que je n'utilise qu'un seul listener et pour le test j'avais aussi pensé utiliser className au début mais j'ai changé d'avis et j'ai utilisé classList pour faire un truc plus général (qui permet d'utiliser d'autres class en plus de plier et deplier).

**eleydet** · 30/10/2016, 22h02

Bonsoir,

Beginner a écrit :

Que pensez-vous des solutions uniquement en CSS ?

Exemples :
- https://makina-corpus.com/blog/metie...iew-en-css-pur
- https://acidmartin.wordpress.com/201...no-javascript/

Ces solutions utilisent quelque chose du genre input type="checkbox", c'est à dire, selon mon avis, ce que je nomme une "pirouette classique" pour parvenir à ses fins. Puisqu'on se passe de JavaScript, le site fonctionne même si l'option JavaScript du navigateur est désactivée. Soit on se passe de JavaScript et on met en oeuvre cette pirouette, soit on opte pour Javascript...

**Watilin** · 30/10/2016, 23h27

Personnellement je trouve ça plutôt élégant. En tant qu’utilisateur de NoScript, je ne peux que valider une fonctionnalité dynamique qui fonctionne sans JavaScript.

**Beginner.** · 31/10/2016, 16h29

Oui j'ai aussi remarqué qu'il y avait des input type="checkbox", il fallait y penser... C'est plus difficile de se passer du JS et peut-être impossible dans certains cas où on voudrait aller plus loin dans les fonctionnalités...

**NoSmoking** · 01/11/2016, 09h15

@eleydet : concernant ton code

Code :

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

1
2
3
4
5
6
7
8
for (var i = 0; i < document.getElementsByClassName('plier').length; i++) {
    document.getElementsByClassName('plier') [i].addEventListener('click', function (e) {
        if (this.className == 'deplier') {
            if (e.target === this) this.className = 'plier';
        } 
        else this.className = 'deplier'
    });
}

tu aurais tout intérêt à mettre en cache les éléments plutôt que de rappeler la méthode à chaque itération ;
lorsque tu ajoutes un « listerner » à un élément il est inutile de tester e.target === this ;
cela ne marchera pas si tu décides d'avoir un ou des éléments dépliés au départ ;
optionnel : si plusieures classes doivent être appliqués aux éléments il serait préférable de passeer par les classList, comme réalisé par Beginner..

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var elements = document.querySelectorAll('.plier , .deplier');
var i,
nb = elements.length;
for (i = 0; i < nb; i += 1) {
    elements[i].addEventListener('click', function (e) {
        if (this.className === 'deplier') {
            this.className = 'plier';
        } 
        else {
            this.className = 'deplier'
        }
    });
}

@Beginner. , Watilin :

Que pensez-vous des solutions uniquement en CSS ?

je n'y vois qu'un inconvénient, c'est l'ajout d'élément au HTML sémantiquement pas forcément les bienvenus, et j'ai d'ailleurs proposé cette approche dans Galerie au clic sans JavaScript en utilisant des <input type="radio"> qui ouvrent également pas mal de solutions.

**eleydet** · 01/11/2016, 10h32

Bonjour,

Envoyé par NoSmoking :
tu aurais tout intérêt à mettre en cache les éléments plutôt que de rappeler la méthode à chaque itération ;

Bien vu, cela simplifie le code.

lorsque tu ajoutes un « listerner » à un élément il est inutile de tester e.target === this ;

Là, je conteste. Il s'agit d'une solution à mon problème de départ : Désactiver le clic sur les éléments enfants.

cela ne marchera pas si tu décides d'avoir un ou des éléments dépliés au départ ;

Bien vu! En fait, la liste devrait être toujours dépliée si le JavaScript est désactivé. Dans le cas contraire, elle pourrait être pliée ou dépliée au départ, selon ce que l'auteur décide.

optionnel : si plusieurs classes doivent être appliqués aux éléments il serait préférable de passer par les classList, comme réalisé par Beginner...

Il serait préférable... A mon avis, tout dépend du contexte.

je n'y vois qu'un inconvénient, c'est l'ajout d'élément au HTML sémantiquement pas forcément les bienvenus,

J'ajoute que s'il est possible de créer un tableau sans balise <table>, ce n'est pas le cas avec un <input type="radio"> ou avec un <input type="checkbox">.

Code css :

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

1
2
3
#div_transformee_en_tableau {
  display: table;
}

**NoSmoking** · 01/11/2016, 19h56

Là, je conteste. Il s'agit d'une solution à mon problème de départ : Désactiver le clic sur les éléments enfants.

effectivement j'avais perdu de vue ce point !

Il serait préférable... A mon avis, tout dépend du contexte.

Au final j'aurais, sans utiliser les classList sur ce coup rendant un code plus verbeux

Code :

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
var elements = document.querySelectorAll('.plier , .deplier');
var i, nb = elements.length;
for (i = 0; i < nb; i += 1) {
    elements[i].addEventListener('click', function (e) {
        if (e.target === this) {
            var cn = this.className;
            if (cn.indexOf('deplier') >- 1) {
                cn = cn.replace('deplier', 'plier')
            } 
            else {
                cn = cn.replace('plier', 'deplier')
            }
            this.className = cn;
        }
    });
}

J'ajoute que s'il est possible de créer un tableau sans balise <table>,...

ne confondons pas présentation et contenu et c'est ce que l'on pourrait reprocher à cette méthode c'est l'ajout d'élément non « réellement » concernés mais la machine est en route pour les effets simples et rapides à mettre en oeuvre, on n'a pas toujours besoin de javascript dans les pages.

**Beginner.** · 02/11/2016, 19h53

Envoyé par NoSmoking

@Beginner. , Watilin :
je n'y vois qu'un inconvénient, c'est l'ajout d'élément au HTML sémantiquement pas forcément les bienvenus, et j'ai d'ailleurs proposé cette approche dans Galerie au clic sans JavaScript en utilisant des <input type="radio"> qui ouvrent également pas mal de solutions.

Ok et merci pour l'article.

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

JavaScript

Discussions similaires

Partager

Partager