Autoriser un seul clic sur une page ?

**vlx360** · 21/07/2017, 01h06

Hello, pour vous ! est-il possible de ne permettre qu'un seul clic en tout et pour tout sur une page web ?

En fait c'est à cause du fait que le lien lance une macro sur une page web locale au et si par malheur la personne clique une nouvelle fois et bien elle lance une seconde fois la macro, c’est un très gros problème, pourtant j’ indique bien de faire attention, mais les gens ont leurs habitudes...

Merci

**Doksuri** · 21/07/2017, 08h26

salut,

en jQuery, il existe .one()
sinon, tu peux toujours te faire une variable globale boolean et addEventListener

**danielhagnoul** · 21/07/2017, 12h57

removeEventListener : https://developer.mozilla.org/fr/doc...eEventListener

Exemple :

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
62
63
64
65
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }
        
                /* code du test */
                
                main {
                        min-height: 100rem;
                        width: 100%
                }
                
                /* fin code du test */
                
  </style>
  <script>
    'use strict';
                
        
    document.addEventListener( "DOMContentLoaded", ev => {
                        
      // code du test
                        
                        
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => { 
                        
      // code du test
                        
                        const
                                elemMain = document.querySelector( "main" ),
                                listenerMain = ev => {
                                        elemMain.style.backgroundColor = "red";
                                        
                                        setTimeout( () => {
                                                elemMain.style.backgroundColor = "white";
                                                elemMain.removeEventListener( "mouseenter", listenerMain, false );
                                        }, 2000 );
                                };
                        
                        elemMain.addEventListener( "mouseenter", listenerMain, false );
                        
                        // fin code du test
                        
    }, false );
  </script>
</head>
<body>
	<main>
 
	</main>
</body>
</html>

**vlx360** · 22/07/2017, 03h15

Salut les gars, vous êtes vraiment trop fort !

je ne suis pas un pro du javascript, mais si j'ai déjà un script, je dois le mettre comment dans le code un deuxième <script></script> ?

Apparemment il y a un soucis sur cette ligne ?

document.addEventListener( "DOMContentLoaded", ev => {

**danielhagnoul** · 22/07/2017, 11h47

Envoyé par vlx360

[...] je ne suis pas un pro du javascript, mais si j'ai déjà un script, je dois le mettre comment dans le code un deuxième <script></script> ? [...]

En développement, pour des exemples de code comme sur ce forum, on place souvent (par paresse) tous les codes dans le même fichier.

Un bloc "script JS" ou un fichier JS peut recevoir plusieurs bouts de codes. On sépare généralement les codes JS sans rapport les uns avec les autres, ce qui produit plusieurs petits fichiers JS.

Avant de passer en production, faites une sauvegarde de tous vos fichiers développement.

En production, vos codes CSS et JS doivent toujours être dans des fichiers séparés. Avant la compression (minification), on réunit - dans l'ordre de dépendance - tous ces fichiers en un seul à l'aide d'outils appropriés (voir l'univers du serveur de codes node.js) ou avec un outil online comme Closure Compiler.

Outil online pour le CSS.

D'autres intervenants auront peut-être de meilleurs conseils à vous donner ou de meilleurs outils à vous conseiller (voir aussi le forum et les tutoriels node.js). Personnellement, les outils online ci-dessus me suffisent pour l'instant.

Envoyé par vlx360

[...] Apparemment il y a un soucis sur cette ligne ? document.addEventListener( "DOMContentLoaded", ev => {

Non ! C'est du ES2015 (le JS d'aujourd'hui), si vous travailler avec des navigateurs obsolètes il faut le convertir en ES5, voir le nota bene dans ma signature.

**vlx360** · 22/07/2017, 13h20

OK Daniel, mais entre code quel est le caractère qui sépare STP ?

Merci

**vlx360** · 22/07/2017, 20h07

Apparemment il y a bien une erreur dans le code !

Firefox indique :

erreur de syntaxe ligne 29 caractère 56

Par contre ce code est-il censé appliquer un seul clic car çà ne fonctionne pas du tout, je peux cliquer autant de fois que je le souhaite et sur tous les liens.

**danielhagnoul** · 22/07/2017, 21h46

Envoyé par vlx360

[...] il y a bien une erreur dans le code ! [...] çà ne fonctionne pas du tout, je peux cliquer autant de fois que je le souhaite et sur tous les liens.

Manifestement on ne parle pas de mon code !

Je teste toujours mes codes ! Il suffit de faire un copier-coller dans un nouveau fichier HTML pour le tester et s'apercevoir qu'il fonctionne bien avec les navigateurs actuels (Chrome, Firefox et Edge).

Il n'y a pas de lien à tester dans mon exemple !

Pour moi cette discussion est close.

**vlx360** · 23/07/2017, 02h08

Justement j'ai mis ce code dans dreamweaver, ensuite ouverture en test avec firefox, j'ai le message d'erreur ci-dessus, c’est bien firefox qui annonce l'erreur, j'ai juste fait un copier coller, ensuite si ce code est censé n’autoriser qu' un seul clic, çà ne fonctionne pas du tout !

je parle du code que tu as inséré plus haut et si c'est çà,

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }
 
                /* code du test */
 
                main {
                        min-height: 100rem;
                        width: 100%
                }
 
                /* fin code du test */
 
  </style>
  <script>
    'use strict';
 
 
    document.addEventListener( "DOMContentLoaded", ev => {
 
      // code du test
 
 
                        // fin code du test
 
    }, false );
 
    window.addEventListener( "load", ev => { 
 
      // code du test
 
                        const
                                elemMain = document.querySelector( "main" ),
                                listenerMain = ev => {
                                        elemMain.style.backgroundColor = "red";
 
                                        setTimeout( () => {
                                                elemMain.style.backgroundColor = "white";
                                                elemMain.removeEventListener( "mouseenter", listenerMain, false );
                                        }, 2000 );
                                };
 
                        elemMain.addEventListener( "mouseenter", listenerMain, false );
 
                        // fin code du test
 
    }, false );
  </script>
</head>
<body>
<p>
  <main>
 
  </main>
  <a href="DH2.mp3"><img src="gamer.png" width="65" height="65"></a>
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="DH3.mp3"><img src="racer.png" width="64" height="65"></a></p>
</body>
</html>

Je suis bien obligé de rajouter des liens dans la page html pour voir si le code autorise un seul clic !

**NoSmoking** · 23/07/2017, 08h49

Bonjour,
j'ai du mal à voir l'utilité/finalité de la chose, si tu cliques sur un lien, ta page change et ton javascript meurt !!!

**vlx360** · 23/07/2017, 16h54

Salut Nosmoking, en fait c'est à cause du fait que le lien lance une macro, et si par malheur la personne clique une nouvelle fois et bien tu vois, elle lance une seconde fois la macro, c’est un très gros problème, pourtant j’ indique bien de faire attention, mais les gens ont leurs habitudes...

**NoSmoking** · 25/07/2017, 12h56

Si tu as un retour lorsque la macro est terminé il te suffit de supprimer l'action au click, ou de gérer un flag, et de la rétablir, ou de l'autoriser, en fin d'exécution.

Par exemple un truc dans le style

Code :

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

1
2
3
4
5
6
7
8
var bmacroEncours = false;
 
function execMacro() {
  if (!bmacroEncours) {
    bmacroEncours = true;  // à remettre à false en fin d'exécution de la macro
    // lancement de ta macro
  }
}

mais bon ...

**vlx360** · 25/07/2017, 19h15

Ok Nosmoking, merci, mais :

L'interdiction de clic doit être indépendante de la macro, car elle, dure 1 minute quasiment.

Comme je l'ai indiqué précédemment il faudrait une commande ou quelque chose d'équivalent qui induise au clic l'interdiction de clic postérieur.

En l'état ce n'est pas du tout ce genre d'action qu'il faudrait même si je salue la création !

Le meilleur moyen "pour moi",

Comme c’est une page web locale tout ce qu'il y a de plus simple, il faudrait "juste" autoriser un seul clic, point.

c'est exactement un code comme çà qu'il faudrait concrètement, tu n'as le droit de cliquer qu'une fois sur la page !

En JS ou autre code si c'est possible, je cherche sur google, mais je ne trouve rien...

**vlx360** · 27/07/2017, 22h54

Bon je vais être honnête, le code çà ne m'intéresse pas du tout, si quelqu'un à une connaissance PRO, autant me tourner vers lui histoire de le dédommager pour ces quelques lignes de codes, je n'ai vraiment pas le temps de mettre les mains dans le cambouis, j'ai déjà tellement à faire...

En MP si quelqu'un de fiable et compétent peut me faire çà.

MErci

**Beginner.** · 27/07/2017, 23h17

Ben NoSmoking t'a donné une solution...

Envoyé par vlx360

Ok Nosmoking, merci, mais :

L'interdiction de clic doit être indépendante de la macro, car elle, dure 1 minute quasiment.

Même si elle dure longtemps je ne vois pas où est le problème car (avec le code de NoSmoking) durant son exécution il n'est pas possible de la relancer, on peut de nouveau la relancer seulement à la fin de son exécution...

Sinon c'est quoi cette macro au juste (est-ce du code js ?) et comment tu lances son exécution ? Je demande ça car normalement si tu la lances avec le code de NoSmoking ça devrait être bon...

Mais j'ai peut-être mal compris le problème...

**vlx360** · 28/07/2017, 00h11

Je ne l'avais pas compris comme çà,

Imaginons, j'ai deux images sur lesquelles il y a une macro différente, si on clique dessus rapidement cela n’empêcherait pas de lancer une autre macro ? si c'est le cas, c'est bien pour çà que je préférerais un code sur la page web qui n’autorise qu'un clic !

La macro est réalisé avec supermacro, la page web, c'est la chose la plus simple pour moi en tant qu'interface et la page est enregistré en locale avec l'extension hta car les navigateurs ouvraient une fenêtre pour télécharger la ma cro, mais tout çà est résolue et fonctionne nikel désormais.

C'est juste que si une personne clique rapidement sur la même macro ou voir deux et bien là il y a problème.

je pensais qu'avec un "simple" code on pouvait limiter sur toute la page qu'un seul clic, ce qui me paraît le plus efficace et sûr, mais le soucis est que le js c'est du chinois pour moi, car j'ai quand même au choix 248 macro...

**Beginner.** · 28/07/2017, 01h55

Envoyé par vlx360

Je ne l'avais pas compris comme çà,

Imaginons, j'ai deux images sur lesquelles il y a une macro différente, si on clique dessus rapidement cela n’empêcherait pas de lancer une autre macro ? si c'est le cas, c'est bien pour çà que je préférerais un code sur la page web qui n’autorise qu'un clic !

Ben dans ce cas pour toutes ces macro il faut utiliser le "lanceur de macro" (écrit par NoSmoking)...

Envoyé par vlx360

je pensais qu'avec un "simple" code on pouvait limiter sur toute la page qu'un seul clic, ce qui me paraît le plus efficace et sûr, mais le soucis est que le js c'est du chinois pour moi, car j'ai quand même au choix 248 macro...

Ben si je pense que c'est possible mais il nous faudrait plus de détails :

1- hélas je ne comprends pas cette histoire de macro, c'est quoi au juste, est-ce du code js ?
2- Comment est lancé la macro ? En cliquant sur un lien ?
3- Est-ce qu’après une première exécution d'une macro l'utilisateur doit pouvoir en lancer une autre et ce autant de fois qu'il le veut ? La seule chose que tu ne veux pas serait alors une exécution simultanée de plusieurs macro ?

PS : Je pense qu'on peut faire en sorte que seul le premier click soit pris en compte : au début on met une variable isClick à false ensuite au premier click on la met à true et si isClick == true on fait event.preventDefault()...

**vlx360** · 28/07/2017, 02h09

Les macros sont réalisé avec supermacro, je ne sais pas si c'est du java ou autre, çà reste indépendant de la page web sur laquelle se trouve des images sur lesquelles tu cliques et qui lance une macro "l'image contient le lien de la macro qui est sur le pc, la macro à une extension*mcr" qui script les mouvements de souris et clics.

Non l'utilisateur ne doit pas pouvoir lancer une autre macro, d'ou la demande d'interdire les clics suivants.

le plus simple pour moi, ce serait de dire qu'on ne puisse cliquer qu'une fois sur la page web, peu importe ce qu'elle contient, c'est le plus simple, est-ce possible de faire çà ?

OK pour ton code, qui semble être la solution mais c'est comme si je te parlais d'un réglage moteur sur une cartographie, tu ne seras pas ou le mettre ni quoi en faire.

Cette variable est censé se mettre où dans la page web ?

POUR MOI C EST DU CHINOIS COMPLET je ne sais don c pas du tout interpréter ce que tu me dis................................

Que ce soit des macros, de la musique çà n'a pas d'importance, puisque c'est le clic qui compte, l'utilisateur n'a le droit d' utiliser qu' un seul clic ou de ne cliquer qu'une fois sur la page web, il y a forcément une variable ou un code, je ne sais pas qui puisse faire çà ?