Autoriser un seul clic sur une page ?

Version imprimable

21/07/2017, 01h06
vlx360

Autoriser un seul clic sur une page ?

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
21/07/2017, 08h26
Doksuri

salut,

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

:salut:

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

Exemple :

Code:

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>

22/07/2017, 03h15
vlx360

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 => {
22/07/2017, 11h47
danielhagnoul

Citation:

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.

Citation:

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.
22/07/2017, 13h20
vlx360

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

Merci
22/07/2017, 20h07
vlx360

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.
22/07/2017, 21h46
danielhagnoul

Citation:

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.

:calim2:

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 ! :weird:

Pour moi cette discussion est close.

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:

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 !

23/07/2017, 08h49
NoSmoking

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 !!!
23/07/2017, 16h54
vlx360

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

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:

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

25/07/2017, 19h15
vlx360

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...
27/07/2017, 22h54
vlx360

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
27/07/2017, 23h17
Beginner.

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

Citation:

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...
28/07/2017, 00h11
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 !

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...
28/07/2017, 01h55
Beginner.

Citation:

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

Citation:

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()...
28/07/2017, 02h09
vlx360

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 çà ?
28/07/2017, 02h20
Beginner.

Ben dans ce cas il faudrait essayer ce que je dis dans le PS...

Tu as accès à la page web ? Peux-tu repérer la balise <body> ?
28/07/2017, 02h22
vlx360

Oui, c'est une locale.

Oui body je vois

J'ai fait un test ici : http://jsbin.com/bimujebuni/edit?html,output ou plus court : http://jsbin.com/xureracuve/edit?html,output

On voit que seul le premier click passe : quand on clique la première fois sur un bouton on lance la fonction clickB(event) ensuite on remonte jusqu'au body et la fonction clickfunc(event) est alors exécutée. Or cette fonction annule l’événement onclick de tous les éléments de la page donc après tous les click sont ignorés...

Je ne sais pas si ça marchera dans ton cas mais tu peux essayer comme ceci :

1- repère la balise <body> et ajoute : onclick="clickfunc(event)" pour obtenir : <body onclick="clickfunc(event)">.

2- repère la balise </body> et ajoute le script juste avant pour obtenir :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <body onclick="clickfunc(event)"> ... ... ... <script> function clickfunc(event) { var allObj = document.querySelectorAll("*"); for (var i = 0; i < allObj.length; i++) allObj[i].onclick = null ; } </script> </body>

28/07/2017, 14h18
vlx360

Bonjour Beginner. !

MErci beaucoup je vais tester çà et je te tiens au courant !

Si j'ai déjà des scripts dans la page je peux rajouter le tiens avec les balises <script></script> ?
28/07/2017, 16h01
Beginner.

Citation:

Envoyé par vlx360

Si j'ai déjà des scripts dans la page je peux rajouter le tiens avec les balises <script></script> ?

Je pense que oui mais met le en dernier, juste avant la balise </body>...
28/07/2017, 21h38
vlx360

Hello,

Malheureusement çà ne fonctionne pas, peut-être est-ce du aux balises script ?

si je clique j'ai une fenêtre qui dit : erreur de script à la ligne tant "l'objet ne gère pas la propriété ou la méthode query Selector All
28/07/2017, 21h47
Beginner.

Hélas ça peut être à cause de plein de chose, difficile de savoir sans pouvoir examiner le code source...

Il faudrait un exemple au moins, peut-être que tu pourrais en faire un similaire du point de vu de la structure mais qui ne contienne aucune données personnelles/privées ?

si je clique j'ai une fenêtre qui dit : erreur de script à la ligne tant "l'objet ne gère pas la propriété ou la méthode query Selector All

Voici le code :

Code:

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
<!DOCTYPE html>
<html>
<head>
<title>Lancement-Macro</title>
<script type="text/JavaScript">
var myArray = ['Macro-001.mcr', 'Macro-002.mcr'];
function lance(Numero_Macro) {
var wScript = new ActiveXObject("Wscript.Shell");
var myMacro = wScript.CurrentDirectory + "\\" + myArray[Numero_Macro];
wScript.run(myMacro);
return false;
}
<!-- Disable 
function disableselect(e){ 
return false 
} 
 
function reEnable(){ 
return true 
} 
 
//if IE4+ 
document.onselectstart=new Function ("return false") 
document.oncontextmenu=new Function ("return false") 
//if NS6 
if (window.sidebar){ 
document.onmousedown=disableselect 
document.onclick=reEnable 
} 
//--> 
</script>
<meta charset="utf-8">
<style type="text/css">
body {
	background-color: #000;
	overflow: hidden;
	background-image: url();
	background-repeat: no-repeat;
}
img {
border: none;
}
body,td,th {
	color: #FFF;
}
</style>
</head>
<body onclick="clickfunc(event)">
<p>
  <hta:application border="none" singleinstance="none" windowstate="maximize" scroll="no" caption="no" innerborder="no"></hta:application>
</p>
<tr>
  <td width="45">&nbsp;</td>
  <td width="237"><a href="" onClick="lance(0);return false;"><img src="eg.v.png" width="41" height="33" onMouseOver="this.src='es.v.png'" onMouseOut="this.src='eg.v.png'" /></a></td>
  <td width="125"><p><a href="" onClick="lance(1);return false;"><img src="er.v.png" width="41" height="33" onMouseOver="this.src='es.v.png'" onMouseOut="this.src='er.v.png'" /></a></p>
  <p>&nbsp;</p></td>
 
<script>
      function clickfunc(event) {
        var allObj = document.querySelectorAll("*");
        for (var i = 0; i < allObj.length; i++) 
          allObj[i].onclick = null ;
      }
    </script>
</body>
</html>

28/07/2017, 22h18
Beginner.

Ah oui peut-être que ça passe pas avec IE je vais regarder mais là avec le code on comprend mieux et je vois qu'il y une fonction qui lance les macro, c'est drôle car j'avais aussi appellé le code de NoSmoking comme cela...

Du coup c'est cette fonction qu'il faudrait modifier pour rajouter le code de NoSmoking...

Je reviens...
28/07/2017, 22h23
vlx360

Si tu le dis Beginner lol ! :mrgreen:

Ok donc apparemment la fonction : document.querySelectorAll("*")ne passe pas sous IE inférieur à 8 ???

Bon repassons au plan A, remplace la première balise <script> (celle qui contient la fonction lance(Numero_Macro) par celle-ci :

Code:

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
 
<script type="text/JavaScript">
 
var myArray = ['Macro-001.mcr', 'Macro-002.mcr'];
var bmacroEncours = false;
 
function lance(Numero_Macro) {
 
    if (bmacroEncours) return ;
    bmacroEncours = true ;
 
    var wScript = new ActiveXObject("Wscript.Shell");
    var myMacro = wScript.CurrentDirectory + "\\" + myArray[Numero_Macro];
    wScript.run(myMacro);
    return false;
}
<!-- Disable 
function disableselect(e) {
    return false
}
 
function reEnable() {
    return true
}
 
//if IE4+ 
document.onselectstart = new Function("return false")
document.oncontextmenu = new Function("return false")
//if NS6 
if (window.sidebar) {
    document.onmousedown = disableselect
    document.onclick = reEnable
}
//-->
</script>

28/07/2017, 22h54
Beginner.

Ah je suppose qu'en fait tu n'as mis qu'un morceau du script car là il n'y a que deux macro... Dans l'original j'ai cru comprendre qu'il y en avait plus c'est ça ?

Donc en fait pour te repérer : il faut que tu ajoutes les lignes 5,9 et 10.
28/07/2017, 23h28
vlx360

Oui, là j'ai mis juste le code complet avec deux macros.

Lorsque je lis ton code il est vraiment différent de l'ancien.

Je dois rajouter les lignes que tu dis, ok, malgré tout je dois en enlever aussi, donc là c'est pas clair ce que tu me dis !

Vois-tu ? de mon point de vue c'est pas clair du tout !

Et si je dois juste ajouter les lignes en conservant l'ancien code, à partir de quelle ligne je dois insérer 5,9 et 10, comme je ne sais pas les intérpr&ter je pourrais aussi bien les mettre à la fin ou au début en ce qui me concerne !

EDIT : Au temps pour moi je vois plus clair....
28/07/2017, 23h41
vlx360

Apparemment çà à l'air de marcher, je v ais faire un test réel en situation, je re !
28/07/2017, 23h46
Beginner.
Il y a juste trois lignes de plus :

Repère ce passage : function lance(Numero_Macro) {

Juste avant rajoute cette ligne : var bmacroEncours = false;

Juste après ajoute ces deux lignes :
Code:

1 2 if (bmacroEncours) return ; bmacroEncours = true ;
Tu obtiens alors :
Code:

1 2 3 4 5 6 7 8 9 var bmacroEncours = false; function lance(Numero_Macro) { if (bmacroEncours) return ; bmacroEncours = true ; ... ...
28/07/2017, 23h56
vlx360

PARFAIT, Merci beaucoup Beginner et à Nosmoking aussi qui m'avait bien aidé pour les macros si ma mémoire est bonne !

Merci j'vais édit mon message j'ai vu les 3 lignes mais avec le manque d'habitude pour voir le code je pensais que c'était plus difficile à discerner !

Ca marche TIP TOP !

Dis moi, en petites lignes comme çà tu n'aurais pas l'équivalent pour générer un son au clic ?
29/07/2017, 00h15
Beginner.

Ah enfin... Tant mieux si ça marche.

Sinon oui NoSmoking avait donné le principe depuis le début et la solution est devenue évidente après que tu aies posté du code, comme quoi c'est important de poster du code...
29/07/2017, 00h21
vlx360

Je le saurais pour la prochaine fois, je ne sais pas comment j'aurais fais sans vous...

On se revoit dans un an, laissez moi vos adresses en MP, "si vous voulez" et je vous enverrais un cadeau à ce moment là...
29/07/2017, 01h01
Beginner.

Un cadeau dans un an ? Il faut être patient...

Non sérieusement la satisfaction d'avoir rendu service est suffisante...(c'est beau ça, non ?)

PS : N’oublie pas de mettre le fil en résolu.
29/07/2017, 02h39
vlx360

Vient à point à qui sait attendre !

Fuseau horaire GMT +2. Il est actuellement 16h12.