Convertir onclick="return false;" en HTML

**jeicko** · 07/06/2021, 12h41

Bonjour à tous,

Je viens vers vous car je rencontre une difficulté.

J'ai cette ligne de code dans ma page HTML : <a href="#" onclick="return false;">.
Elle pose problème avec ma configuration apache, en particulier avec cette partie : script-src 'self'.
Si je supprime cette partie, la ligne dans ma page HTML ne pose pas de problème mais j'ai ce message du W3C :

Error: Content-Security-Policy HTTP header: Bad content security policy: Unrecognised directive-name: "https". Expecting directive-value but found U+003A (:). Non-ASCII and non-printable characters must be percent-encoded.

Je souhaiterais donc laisser script-src 'self' mais trouver une alternative pour ne pas avoir du code JS dans ma page HTML.

Ma question est donc la suivante :

Comment puis-je écrire l’équivalent de <a href="#" onclick="return false;"> pour que ce soit interprété en HTML ?

Je vous montre mon code HTML et JS associé :

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
<div class="hasard-choix anim-f">
            <a href="#" onclick="return false;">
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
            </a> 
           </div>

Code JS :

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
function melanger(tableau) {
        for (let i = tableau.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          const element = tableau[i];
          tableau[i] = tableau[j];
          tableau[j] = element;
        }
      }
 
      const ar_liens = ["images/test1.zip", "images/test2.zip", "images/test3.zip"];
      const ar_liens2 = ["images/test4.zip", "images/test5.zip", "images/test6.zip"];
 
      const dureeRafrRef = 1000 / 25;
 
      function groupe(liens, parent) {
        let nombClig = 10;
        const ob_cont = document.querySelector(parent);
        const ob_lien = ob_cont.querySelector("a");
        const nl_images = ob_cont.querySelectorAll("svg");
 
        const ar_ordreIndexClig = [];
 
        for (let i = nl_images.length - 1; i >= 0; i--) {
          ar_ordreIndexClig[i] = i;
          const index = i;
          nl_images[i].onclick = function () {
            for (const ob_image of nl_images) {
              ob_image.onclick = null;
            }
 
            let compteur = 0;
            let decalage = 0;
            melanger(ar_ordreIndexClig);
            while (ar_ordreIndexClig[decalage] !== index) {
              decalage++;
            }
 
            let delai = 0;
            const ob_imageClic = this;
            let ob_imageClig = null;
 
            window.requestAnimationFrame(function animation() {
              const tempEcouleNouv = performance.now();
              const dureeRafr = Math.min(tempEcouleNouv - tempsEcoule, dureeRafrRef);
              tempsEcoule = tempEcouleNouv;
 
              if ((delai -= dureeRafr) <= 0) {
                if (nombClig > 0) {
                  nombClig--;
                  if (ob_imageClig !== null) {
                    ob_imageClig.style.visibility = "";
                  }
                }
                let i =
                  ar_ordreIndexClig[(compteur + decalage) % ar_ordreIndexClig.length];
                if (nombClig === 0) {
                  while (nl_images[i].style.visibility === "hidden") {
                    compteur++;
                    i =
                      ar_ordreIndexClig[
                        (compteur + decalage) % ar_ordreIndexClig.length
                      ];
                  }
                }
                (ob_imageClig = nl_images[i]).style.visibility = "hidden";
                if (++compteur >= ar_ordreIndexClig.length) {
                  compteur = 0;
                  melanger(ar_ordreIndexClig);
                  decalage = Number(ar_ordreIndexClig[0] === i);
                }
                delai = 2 * dureeRafrRef;
              }
 
              for (const ob_image of nl_images) {
                if (ob_image.style.visibility !== "hidden") {
                  window.requestAnimationFrame(animation);
                  return;
                }
              }
 
              nl_images[(nl_images.length - 1) * 0.5].style.visibility = "";
 
              const lien = liens[index];
              ob_lien.href = lien;
              ob_lien.onclick = null;
              ob_lien.download = lien.substr(lien.lastIndexOf("/") + 1);
              ob_lien.click();
            });
 
            let tempsEcoule = performance.now();
          };
        }
      }
 
      groupe(ar_liens, ".anim-g");
      groupe(ar_liens2, ".anim-f");

**tag9724** · 07/06/2021, 14h51

Avoir des CSP ( Content Security Policies ) d'activés et qui interdisent l'exécution de code en JS au sein de la page même est une bonne chose niveau sécurité.

Pour répondre à ta question il y a au moins deux solutions, la première étant de rajouter un event.preventDefault() dans l'événement onclick de ta balise

Code :

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

1
2
3
4
5
6
7
8
const monLien = document.querySelector("a")
 
monLien.onclick = ( event ) => { 
  // Empêche l'ouverture du lien
  event.preventDefault() 
 
  /* La suite de ton code au besoin */
}

Une petit note par rapport a ça le lien pourras toujours être ouvert dans un nouvel onglet au click de la molette souris

La seconde est de ne pas utiliser d'attribut href sur ta balise <a>, celle-ci n'aura plus le style par défaut d'un lien ( texte bleu souligné ) et ne pourras plus être focus a l'aide de la touche tab ( problématique niveau accessibilité ), il ne faudra donc pas oublier de définir un style et a la rigueur mettre un attribut tabindex pour rendre a nouveau la balise focusable.

Je pense que dans ton cas rajouter une ligne avec un preventDefault() devrais faire l'affaire

Code :

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

1
2
const ob_lien = ob_cont.querySelector("a");
ob_lien.onclick = ev => ev.preventDefault()

**jeicko** · 07/06/2021, 15h12

Merci pour ta réponse rapide,

Si j'ai bien compris ce que tu me proposes, avec la 1ère solution, dans mon code HTML je laisse un simple : <a href="#"> c'est bien ça ?

**tag9724** · 07/06/2021, 15h27

Oui c'est ça, tu laisse le href="#" et rajoute un element.onclick = ev => ev.preventDefault(), je t'ais mis un exemple très basique ici au besoin https://jsfiddle.net/zdt39fwr/2/

**jeicko** · 07/06/2021, 15h33

Merci pour l’exemple. Tout fonctionne parfaitement avec ce que tu me proposes. Merci pour ton efficacité

Je passe le sujet en résolu.

Convertir onclick="return false;" en HTML

JavaScript

Discussions similaires

Partager

Partager