Délai sur suppression Onclick

Version imprimable

Bonjour à tous,

Un petit bug de développement m'embête au plus haut point depuis quelques temps, sans parvenir à trouver une solution.
Voici les faits :

J'ai un formulaire en 2 parties.
La première partie est composée d'informations générales sur l'individu.
Après validation de cette première partie de formulaire, je rajoute un onClick sur la div globale contenant la première partie. Ce OnClick permet d’agrandir ou de rapetisser le "height" de la div en question (qui sert de "récapitulatif" de la première partie, afin de toujours l'avoir sous les yeux même durant la saisie de la deuxième partie).
Code:

1 2 3 setTimeout(function(){ identity.onclick = function(){expertAdvice(expert_advice.style.height)} ; }, 1000) ;
Ci-joint le code d'ajout du OnClick.

Jusque la, pas de soucis, le onClick se comporte correctement.

Dans cette div qui contient le OnClick, il existe un deuxième OnClick sur un lien permettant de repasser à l'étape 1 (si l'on se rend compte que les informations fournies ne sont pas exactes). Ce OnClick supprime le premier OnClick de la Div (puisque dans la première partie, la div ne doit pas s'agrandir ou rapetisser).

Code:

$("#identity_card").removeAttr('onclick');

Jusque la toujours aucun soucis.

Seulement si on clic "trop rapidement" dans la Div, le onClick ne se supprime pas, et reste actif. En revanche si on attend, pas de soucis la Div ne prendra pas le OnClick, preuve qu'il est supprimé. En réalité c'est comme s'il existait un délai entre le moment ou la fonction JavaScript lit la suppression (première ligne de la fonction de retour), et le moment ou la suppression devient active.

A vrai dire je n'ai aucune idée d'où cela peut bien venir...
Peut-être de la transition en CSS :
Code:

1 2 3 4 5 6 7 8 9 #identity_card{ ............. -webkit-transition:all 1000ms ease-in-out; -o-transition:all 1000ms ease-in-out; -moz-transition:all 1000ms ease-in-out; -opera-transition:all 1000ms ease-in-out; -khtml-transition:all 1000ms ease-in-out; transition:all 1000ms ease-in-out; }
Peut-être de l'imbrication des deux OnClick qui n'est pas forcément la meilleure chose à faire...

Bref, j'en sais rien, c'est vraiment pas pratique, j'ai "réglé" la solution avec un max-height/min-height que je mets/supprime selon la partie ou je me trouve, mais c'est pas forcément des plus propres, et ça ne me dit pas le pourquoi du comment, c'est pourquoi je m'en remets à vous !

Je vous remercie d'avance :)

EDIT : A noter que la "non-suppression par clic rapide dans la div" est aléatoire. Parfois ça le fait, et parfois non.

Bonjour,
pas sûr d'avoir tout compris mais pourquoi ne pas tout traiter dans le même événement en gérant éventuellement le dblclick.

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Simple ou Double click ?</title>
<style>
#zone_test{
  background:#ABC;
}
</style>
</head>
<body>
<div id="zone_test">Zone test</div>
<script>
var oDiv = document.getElementById('zone_test');
oDiv.onclick = function (){
  this.innerHTML += '<br>CLICK Simple'
};
oDiv.ondblclick = function (){
  this.innerHTML += '<br>CLICK Double';
};
</script>
</body>
</html>

05/07/2014, 11h28
kaari kosaku
Et en faisant ça quelque chose comme ça ? :
Code:

1 2 3 4 5 6 function Reconclick () { identity.removeAttr('onclick'); expertAdvice(expert_advice.style.height); identity.onclick = Reconclick } identity.onclick = Reconclick ;
L'idée c'est lorsque tu clique, l'attribut onclick est enlevé (donc tu peux cliquer autant que tu veux, ça n'aura aucun effet), puis la fonction expertAdvice() est appelée, et enfin on ajoute à nouveau le fonctionnement du click.
07/07/2014, 17h04
Canabal

@NoSmoking : Parce que ce n'est pas assez compliqué, donc je n'y ai pas pensé ! :D Blague à part, je vais de ce pas l'adapter et tester voir ce que ça donnerait, et je viendrais donner le verdict demain. Merci bien !

@kaari kosaku : Le problème vient justement du fait que le removeAttr(onclick) ne se supprime pas instantanément, j'avais déjà testé un truc similaire mais sans succès malheureusement. Merci quand même :)

Tu peux également regarder du coté de la délégation d'événement sur le conteneur principal.

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Délégation evenement</title>
<style>
#zone_test{
  background:#ABC;
  height:100px;
}
#zone_neutre{
  width:100px;
  height:50px;
  margin: auto;
  background:#CDE;
}
</style>
</head>
<body>
<div id="zone_test">
  Zone test
  <div id="zone_neutre">
  </div>
</div>
<script>
var oDiv = document.getElementById('zone_test');
oDiv.onclick = function (e){
  e= e ||event;
  var oSrc = e.target||e.srcElement;
  if( this === oSrc){
    this.style.height = this.offsetHeight > 100 ? '' :'200px';
  }
};
</script>
</body>
</html>

et/ou faire un mixe des deux!