Fonction onclick appelée intempestivement

**moimp** · 12/03/2019, 12h13

Bonjour,
Lorsque je clique sur un emplacement aléatoire en dehors du bouton qui déclenche normalement l’événement la fonction définie dans le onclick est appelée. Ce n'est pas systématique et je n'arrive pas à discerner les cas où ceci se produit. Je pense qu'il y a une interférence avec un autre script. J'ai pensé remplacer cette appel par un écouteur pour contrôler l'événement déclencheur mais dans ce cas, je ne sais pas comment transmettre l'argument de la fonction.
Source html:

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
<form method='post' action="" class="L displCard" style="padding:5px 10px;">
	<input type="hidden" name="id" value="120" />
	<fieldset><legend>Conjoint</legend>
		<p class="note">Vous pouvez modifier les champs grisés après avoir fait un double clic dessus.</p>
	<div class="multiCols">
		<div class="div1" style="margin:0;">
			<label>Prénom</label><input type="text" name="prenom" value="Nathalie" readonly /><br/>
			<label>Nom</label><input type="text" name="nom" value="Xxx" readonly /><br/>
		</div>
		<div class="div2">
			<label>Tél. portable</label><input type="text" name="tel_portable" value="" readonly /><br/>
			<label>Tél. travail</label><input type="text" name="tel_travail" value="" readonly /><br/>
			<label>Courriel</label><input type="text" name="courriel" value="" readonly /><br/>
		</div>
	</div>
	<!-- Appel de la page delFamilyMember.php -->
	<p style="width:480px;" class="center"><input type="submit" id='del' value="Effacer" onclick='confirmBeforeDel({"id":"251","prenom":"Nathalie","nom":"Xxx","courriel":null,"tel_travail":null,"tel_portable":null})' /></p>
		</fieldset>
	<fieldset><legend>Enfants</legend>
		<p class="note">Les lignes en italiques correspondent aux enfants du conjoint.</p>
		<table>
			<thead><tr><th>Prénom</th><th>Nom</th><th>Date de naissance</th><th>Tél. portable</th><th>Tél. travail</th><th>Courriel</th><th></th><th></th><td></td></tr></thead><tbody><tr><td colspan="9" style='text-align:center;'><i>Ce tableau ne contient aucune information.</i></td></tr></tbody>			<tr><td colspan="9" class="center"><input type="submit" value="Nouveau" formaction="parentPage.php?childPageKey=6&relation=9" /></td></tr>
		</table>
	</fieldset>
</form>
 
<script>
        const message   = "Etes-vous sûr de vouloir effacer %s*?";
</script>

Dans cet exemple, le tableau est vide mais lorsqu'il ne l'est pas, il contient un td comme ceci:

Code html :

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

<td><img src='del.png' onclick='confirmBeforeDel(" . json_encode($child) . ")' /></td>

Fichier JavaScript:

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
"use strict";
 
const mainForm	= document.querySelector('.displCard');
 
// Effacement d'un membre de la famille
function confirmBeforeDel(person) {
	if ( confirm(message.replace('%s', person.prenom+' '+person.nom)) ) {
		mainForm.action = "delFamilyMember.php?id="+person.id;
		mainForm.submit();
	}
}

Invité · 12/03/2019, 12h20

Bonjour,

si tu ne montres pas une page en ligne (qu'on puisse tester), ça va être difficile d'identifier le problème.

**moimp** · 12/03/2019, 16h35

Déjà, j'ai indiqué qu'il pouvait y avoir interférence avec un autre script sans le joindre. Donc le voici. J'ai des doutes sur l'événement onblur.

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
 
"use strict";
 
const
	inclForm		= document.querySelector('.displCard')
	, inputs		= document.querySelectorAll('.displCard input:not([name=\'pays\']), .displCard textarea')
	;
 
// Modification des champs
// #######################
 
function handleOnDblClick() {
	this.readOnly = false;
	this.select();
}
 
function handleOnBlur() {
	this.readOnly = true;
	inclForm.action = 'editField.php?field='+this.name;
	inclForm.submit();
}
 
function handleKeyDown(e) {
	if ( e.keyCode == 8 && this.hasAttribute('readonly') ) { e.preventDefault(); }
	if ( e.keyCode == 13 && this.type != 'textarea' ) {
		inclForm.action = 'editField.php?field='+this.name;
		inclForm.submit();
	}
}
 
for (let i=0, max=inputs.length; i<max; i++) {
	if ( inputs[i].type == 'submit' ) continue;
	inputs[i].ondblclick	= handleOnDblClick;
	inputs[i].onblur		= handleOnBlur;
	inputs[i].onkeydown		= handleKeyDown;
}

Envoyé par jreaux62

Bonjour,
si tu ne montres pas une page en ligne (qu'on puisse tester), ça va être difficile d'identifier le problème.

Là, ça va être un peu plus long, car le site n'est pas en production et il faut que je fasse une maquette.

**SpaceFrog** · 12/03/2019, 17h18

ça peut être une question d'imbrication de balise => du coup il faudra stopper la propagation
ça peut être une balise mal fermée ...

**moimp** · 13/03/2019, 11h17

Envoyé par SpaceFrog

ça peut être une question d'imbrication de balise => du coup il faudra stopper la propagation

J'ai essayé mais du coup mon code ne fonctionne plus sur double clic sur un champ. Je pense que je n'ai pas arrêter la propagation correctement ou au bon endroit.

Envoyé par SpaceFrog

ça peut être une balise mal fermée ...

J'ai passé mon code au validateur W3C, ce qui m'a effectivement permis de repérer des balises non refermées dans d'autres parties du code. Malheureusement cette vérification et ces corrections n'ont eu aucune influence sur mon problème actuel.

Premier fichier commun:

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
"use strict";
 
const
	inclForm		= document.querySelector('.displCard')
	, inputs		= document.querySelectorAll('.displCard input:not([name=\'pays\']), .displCard textarea')
	;
 
// Modification des champs
// #######################
 
function handleOnDblClick() {
	this.readOnly = false;
	this.select();
}
 
function handleOnBlur() {
	this.readOnly = true;
	this.event.stopPropagation(); // Nouvelle ligne
	inclForm.action = 'editField.php?field='+this.name;
	inclForm.submit();
}
 
function handleKeyDown(e) {
	if ( e.keyCode == 8 && this.hasAttribute('readonly') ) { e.preventDefault(); }
	if ( e.keyCode == 13 && this.type != 'textarea' ) {
		this.event.stopPropagation(); // Nouvelle ligne
		inclForm.action = 'editField.php?field='+this.name;
		inclForm.submit();
	}
}
 
for (let i=0, max=inputs.length; i<max; i++) {
	if ( inputs[i].type == 'submit' ) continue;
	inputs[i].ondblclick	= handleOnDblClick;
	inputs[i].onblur		= handleOnBlur;
	inputs[i].onkeydown		= handleKeyDown;
}

Fichier propre à la page:

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
"use strict";
 
const
	mainForm	= document.querySelector('.displCard');
 
// Modification des enfants
function callEditFamilyMember(id, relation) {
	mainForm.action = "parentPage.php?childPageKey=6&id="+id+"&relation="+relation;
	mainForm.submit();
}
 
// Effacement d'un membre de la famille
function confirmBeforeDel(person) {
	this.event.stopPropagation(); // Nouvelle ligne
	if ( confirm(message.replace('%s', person.prenom+' '+person.nom)) ) {
		mainForm.action = "delFamilyMember.php?id="+person.id;
		mainForm.submit();
	}
}

**moimp** · 13/03/2019, 18h33

Je complète pour @jreaux62.

Envoyé par jreaux62

si tu ne montres pas une page en ligne (qu'on puisse tester), ça va être difficile d'identifier le problème.

La mise en ligne est retardée par cette autre question.

**moimp** · 14/03/2019, 16h54

Bonjour,

La version standard de mon site est maintenant en ligne.
Il est accessible ici.

Identifiants de connexion: 'test', mot de passe: ';a012Z'.
Puis menu 'Fiche' -> onglet 'famille'.

On constate l'affichage du message de suppression si on fait ceci:

Double clic sur le champ sur un champ de téléphone
Modification du numéro
Confirmation en cliquant à l'extérieur du champ ou en validant par appui sur la touche 'Entrée'
Si dans le message de confirmation, on clique sur OK, l'enregistrement est effacé

Invité · 14/03/2019, 17h17

Bonjour,

il s'agit ici de MODIFIER un champ :

je suis allé jusque cliquer la touche 'Entrée',
la popup s'ouvre bien...
...mais elle se referme tout de suite !! (sans que j'ai le temps de cliquer sur quoi que ce soit).
de plus, la popup affiche "Voulez-vous supprimer ...... ?"

Il y a un VRAI problème....

Tu as dû t'emmêler les pinceaux en écrivant les noms des fonctions à appeler dans ton code JS.

A mon avis : tu as voulu faire des fonctions JS "fourre-tout".
Ça ne peut pas marcher.

Il faut au moins distinguer le type d'action à effectuer.
Par exemple avec un data-action :

Code :

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

1
2
3
<input ...... data-action="edit" />
<input ...... data-action="delete" />
...

[EDIT] A priori, le problème ne survient QUE quand on clique la touche 'Entrée'.
(pas quand on clique en dehors de l'input)

**moimp** · 15/03/2019, 18h04

Envoyé par jreaux62

il s'agit ici de MODIFIER un champ :

je suis allé jusque cliquer la touche 'Entrée',
la popup s'ouvre bien...
...mais elle se referme tout de suite !! (sans que j'ai le temps de cliquer sur quoi que ce soit).
de plus, la popup affiche "Voulez-vous supprimer ...... ?"

Il y a un VRAI problème....

C'est clair! Mais chez moi la popup reste affichée.

Envoyé par jreaux62

Tu as dû t'emmêler les pinceaux en écrivant les noms des fonctions à appeler dans ton code JS.
A mon avis : tu as voulu faire des fonctions JS "fourre-tout".
Ça ne peut pas marcher.

Je joins les codes répartis sur deux fichiers à la fin de ce message pour que tu puisses juger.

Envoyé par jreaux62

Il faut au moins distinguer le type d'action à effectuer.
Par exemple avec un data-action :

Code :

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

1
2
3
<input ...... data-action="edit" />
<input ...... data-action="delete" />
...

Ici je rencontre un problème. Le data_action='delete' figure en deux endroits sur les lignes suivantes. Mais seul le input est détecté dans la définition de variables delElements (voir fichiers family.js ci-dessous, ligne 15).

Code php :

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

1
2
"<img src='".DIR_IMAGES."del.png' title='" . IMG_TITLE_ERASE . "' data-action='delete' onclick='confirmBeforeDel(" . json_encode($child) . ")' />" // Image de suppression d'un enfant. Ligne créée en PHP
<p style="width:480px;" class="center"><input type="submit" id='del' data-action="delete" value="<?= BTN_DEL; ?>" onclick='confirmBeforeDel(<?= json_encode($joined); ?>)' /></p> // Bouton de suppression du conjoint.

Envoyé par jreaux62

[EDIT] A priori, le problème ne survient QUE quand on clique la touche 'Entrée'.
(pas quand on clique en dehors de l'input)

Il semble que ce soit le cas, mais je ne suis pas sûr que ce soit systématique.

Ci-dessous: codes js, en deux fichiers. Le premier est commun aux deux premiers onglets de formulaires et sert à la modification des champs. Le second sert à l'appel des fichiers de suppression et d'édition

Code common.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
 
// Modification des champs
// #######################
 
"use strict";
 
const
	inclForm		= document.querySelector('.displCard')
	, inputs		= document.querySelectorAll('.displCard input:not([name=\'pays\']), .displCard textarea')
	;
 
function handleOnDblClick() {
	this.readOnly = false;
	this.select();
}
 
function handleOnBlur() {
	this.readOnly = true;
	inclForm.action = 'editField.php?field='+this.name;
	inclForm.submit();
}
 
function handleKeyDown(e) {
	if ( e.keyCode == 8 && this.hasAttribute('readonly') ) { e.preventDefault(); }
	if ( e.keyCode == 13 && this.type != 'textarea' ) {
		inclForm.action = 'editField.php?field='+this.name;
		inclForm.submit();
	}
}
 
for (let i=0, max=inputs.length; i<max; i++) {
	if ( inputs[i].type == 'submit' ) continue;
	inputs[i].ondblclick	= handleOnDblClick;
	inputs[i].onblur		= handleOnBlur;
	inputs[i].onkeydown		= handleKeyDown;
}

Code family.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
 
"use strict";
 
const
	  mainForm		= document.querySelector('.displCard')
	, delElements	= document.querySelectorAll("[data-action='delete']")
	;
 
// Modification des enfants
function callEditFamilyMember(id, relation) {
	mainForm.action = "parentPage.php?childPageKey=6&id="+id+"&relation="+relation;
	mainForm.submit();
}
 
console.log(delElements);
// Effacement d'un membre de la famille
function confirmBeforeDel(person) {
	if ( confirm(message.replace('%s', person.prenom+' '+person.nom)) ) {
		mainForm.action = "delFamilyMember.php?id="+person.id;
		mainForm.submit();
	}
}

**moimp** · 16/03/2019, 00h46

J'ai localisé l'erreur mais je n'arrive pas à la prévenir:
Dans mon fichier common.js à la ligne 9, il faudrait ne sélectionner que les éléments qui ont l'attribut readonly mais je n'arrive pas à l'intégrer dans mon expression css de façon compatible avec tous les navigateurs. De plus je ne suis pas sûr que lorsque cet attribut change de façon dynamique cette sélection de nœuds soit fiable.
Si ça ne marche pas, j'ajouterai un data-editable=true comme tu me l'as indiqué mais je trouve un peu bête de répéter cet attribut sur tous les champs qui ont déjà l'attribut readonly puisque ce sont exactement les mêmes.

Invité · 16/03/2019, 10h49

Bonjour,

Envoyé par moimp

...je trouve un peu bête de répéter cet attribut sur tous les champs qui ont déjà l'attribut readonly puisque ce sont exactement les mêmes....

1- Ce que j'ai appelé "fonctions fourre-tout", ce sont justement tes "fonctions génériques".

Tu fais une généralités sur les input readonly.
Or, ce n'est pas parce qu'un input a l'attribut readonly qu'il sera "forcément modifiable".

D'autre part, ces input n'ont pas forcément besoin d'être en type="submit" non plus !
Ni même d'être des <input> ! (quid d'un <select>* ou <textarea> ?)

N.B. Pour le <select> (qui n'accepte pas readonly), on en avait parlé dans une autre discussion (astuce avec disabled sur les <option> non-sélectionnées).

2- Si tu veux vraiment maitriser ce que tu fais, il est préférable de spécifier / identifier les input/button/a ou autres, sur lesquels tu mets des évènements spécifiques.
Avec une classe, notamment.

Voilà un exemple, sans ambiguité :

Code HTML :

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

1
2
3
<input type="text" name="machin" value="machin" class="field-editable" readonly="readonly" />
<input type="text" name="bidule" value="bidule" class="field-editable" readonly="readonly" />
<textarea class="field-editable" readonly="readonly">Hello the World</textarea>

Il suffit ensuite d'utiliser querySelectorAll / addEventListener sur la classe "field-editable".

Code :

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

1
2
3
4
5
6
7
8
9
10
11
const fields_editable = Array.from(document.querySelectorAll(".field-editable"));
fields_editable.forEach(function(field) {
  field.addEventListener("dblclick", function() {
    handleOnDblClick(field);
  });
});
 
function handleOnDblClick(elt) {
  elt.readOnly = false; // pour <input> et <textarea>
  elt.select();
}

On peut aussi passer des paramètres avec un data-person, par exemple.

**moimp** · 16/03/2019, 15h31

Bonjour,
Je rencontre deux difficultés avec ton exemple:

IE n'accepte pas Array.from ⁽¹⁾ et je ne veux pas faire l'impasse sur le navigateur le plus répandu.
J'ai essayé de ruser avec une boucle for mais je maîtrise très mal les fonctions anonymes.

⁽¹⁾ J'ai vu qu'il existait un polyfill, mais je trouve que ça complique le code, alors si je peux m'en passer...

Voici mon code:

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
 
"use strict";
 
// Modification des champs
// #######################
 
const editableFields = document.querySelectorAll("[data-action='edit']");
 
for (let i=0, max=editableFields.length; i<max; i++) {
	(function(field) {
		field.addEventListener('dblclick', function() {
			field.readOnly = false;
			field.select();
		});
	});
}

**Watilin** · 16/03/2019, 15h53

Envoyé par moimp

IE n'accepte pas Array.from

Quelle version d’IE ?

et je ne veux pas faire l'impasse sur le navigateur le plus répandu.

Je crois que j’entends des employés de Google qui rigolent.

⁽¹⁾ J'ai vu qu'il existait un polyfill, mais je trouve que ça complique le code, alors si je peux m'en passer...

En fait le but du polyfill c’est juste de coller un bout de code au début de ton fichier, ou dans un autre fichier, pour te simplifier la vie. Mais si tu préfères, tu peux toujours…

ruser avec une boucle for

Actuellement, dans ta boucle, tu définis une fonction anonyme mais tu ne l’appelles pas.

Code :

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

1
2
3
for ( ... ) {
	(uneFonctionAnonyme);
}

Ce qui manque c’est les parenthèses d’appel, et l’argument qui va avec :

Code :

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

1
2
3
for ( ... ) {
  (uneFonctionAnonyme)(argument);
}

Cet argument c’est editableFields[i]. Au final, ça donne ceci :

Code :

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

1
2
3
4
5
6
7
8
for (let i=0, max=editableFields.length; i<max; i++) {
	(function(field) {
		field.addEventListener('dblclick', function() {
			field.readOnly = false;
			field.select();
		});
	})(editableFields[i]);
}

Il y a quelques années j’ai écrit un article à propos des différentes façons de faire des boucles, je pense que ça devrait t’intéresser : forEach et les collections DOM.

**moimp** · 16/03/2019, 18h18

Tout d'abord un grand merci à vous deux !

Envoyé par Watilin

Quelle version d’IE ?

J'ai testé sur IE11, mais MDN indique NON sans préciser la version, ce qui d'après moi sous-entend toutes les versions.

Envoyé par Watilin

Actuellement, dans ta boucle, tu définis une fonction anonyme mais tu ne l’appelles pas.
Ce qui manque c’est les parenthèses d’appel, et l’argument qui va avec :

Code :

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

1
2
3
for ( ... ) {
  (uneFonctionAnonyme)(argument);
}

Vu, merci.

Envoyé par Watilin

Cet argument c’est editableFields[i]. Au final, ça donne ceci :

Code :

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

1
2
3
4
5
6
7
8
for (let i=0, max=editableFields.length; i<max; i++) {
	(function(field) {
		field.addEventListener('dblclick', function() {
			field.readOnly = false;
			field.select();
		});
	})(editableFields[i]);
}

Ton exemple m'a bien aidé, je l'ai transposé pour tous mes cas d'application.

Envoyé par Watilin

Il y a quelques années j’ai écrit un article à propos des différentes façons de faire des boucles, je pense que ça devrait t’intéresser : forEach et les collections DOM.

Maintenant que mon appli marche je ne vais pas manquer de le regarder.

**NoSmoking** · 17/03/2019, 08h45

Bonjour,
indépendamment de la méthode utilisée pour les boucles

pourquoi utiliser une closure !?!

Code :

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

1
2
3
4
5
6
7
8
for (let i = 0, max = editableFields.length; i < max; i++) {
  (function(field) {
    field.addEventListener('dblclick', function() {
      field.readOnly = false;
      field.select();
    });
  })(editableFields[i]);
}

et ne pas faire simplement, le this correspondant à l'élément ayant déclenché l'événement

Code :

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

1
2
3
4
5
6
for (let i = 0, max = editableFields.length; i < max; i++) {
  editableFields[i].addEventListener('dblclick', function() {
    this.readOnly = false;
    this.select();
  }, false);
}

ou en ne définissant qu'une seule fois la fonction pour éviter de créer une nouvelle fonction anonyme à chaque itération

Code :

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

1
2
3
4
5
6
7
8
function handleOnDblClick() {
  this.readOnly = false;
  this.select();
}
for (let i = 0, max = editableFields.length; i < max; i++) {
  // on passe ici la référence à la fonction
  editableFields[i].addEventListener('dblclick', handleOnDblClick, false);
}

...

Fonction onclick appelée intempestivement

JavaScript

Discussions similaires

Partager

Partager