Stopper une fonction

Version imprimable

Bonjour,
Je travaille avec Jquery SVG.
Ma page à plusieurs boutons (Créer rectangle, Move, Connecteur...)
Lorsque je clique sur un des boutons une fonction se lance.
Mon souci, c'est que pour chacune de mes fonctions j'ai le même sélécteur.
Ex :
Lorsque je clic sur le bouton 'Connecteur', ca me créer un connecteur sur mon rectangle, ensuite lorsque je clic sur le bouton 'Move' et que je bouge mon rectangle, il me créer automatiquement un connecteur.
Voici le code pour le click sur les boutons :
Code:

1 2 3 4 5 6 7 8 9 10 11 $('#connector').click( function() { enable = 0; $('#choice').css('display' , 'none'); connector(); }); $('#moveBt').click(function() { enable = 0; $('#choice').css('display' , 'none'); move(); });
et voici, les fonctions en questions :
connector() :
Code:

1 2 3 4 5 6 $('rect').mousedown(function(e){ // mon code }).mouseup(function() { // mon code });
et move()
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function move(){ $('rect').mousedown(function(e){ // mon code }) var mousemove = function(e){ // mon code } var mouseup = function(e){ // mon code }; }
Je pense que ca ne sert à rien que je vous mette le code entier pour chacune des fonctions.
J'ai bien essayé de faire :
Code:

1 2 $('rect').unbind('mousedown', connector());
sur ma fonction move()
Mais ca ne fonctionne pas.
Merci de votre aide.

10/03/2013, 01h04
Lorenzo77

salut,

ceci devrait fonctionner :

Code:

$('rect').unbind('mousedown');

ou

Code:

$('rect').unbind();

Merci de ta réponse, mais les unbind ne fonctionne pas, surement parce que sur presque toutes mes fonctions j'ai le même sélecteur.

J'ai réussi à trouver une piste :

Code:

1
2
3
4
5
6
7
8
 
var enable = 1;
function node(){
$('#svgsketch').on('click', function(event) {
    if(enable == 1){
            // mon code pour créer le noeud
    } else { return false; }
});

Et sur les autres cliques des boutons, ma variable passe à 0...
Marche pour la création de forme mais pas pour le mouvement et la création de liaison entre mes formes...
Voici ma fonction move

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
    if(move_ == 1){
    $('rect').on('mousedown', function(e){
         x = e.target.parentNode.getAttribute('id');
         destinationX_ = e.target.parentNode.getAttribute('x');      
         destinationY_ = e.target.parentNode.getAttribute('y');             
         $('#x').html(destinationX_);
         $('#y').html(destinationY_);  
         $(window).bind('mousemove', mousemove);
         $(window).bind('mouseup', mouseup);      
     })
     var mousemove = function(e){ 
         var destinationX = e.pageX - $('#svgsketch').offset().left;  
         var destinationY = e.pageY - $('#svgsketch').offset().top;  
        $('#'+x).attr('transform' , 'translate('+destinationX+', '+destinationY+')');    
    }
    var mouseup = function(e){   
        $(window).unbind('mousemove', mousemove);
        $(window).unbind('mouseup', mouseup); 
    };
    } else { return false;}

et ma fonction liaison :

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
 
    move_ = 0;
$("#temp").css('display' , 'block');
dashArray = '5';
line = sketchpad.line(0,0,0,0,{fill:"red",role:"dragshape",stroke:"red",strokeWidth:1, strokeDashArray:dashArray, id:'temp'});	
$('#svgsketch').mousedown( function(event){
    event.preventDefault();
	event = event.target;
	cx = event.getAttribute('cx');
	cy = event.getAttribute('cy');	
    group = event.parentNode.getAttribute('id'); 
	$('#line1').html(cx);
	$('#line2').html(cy);
    $('#temp').css('display' , 'block');
    xCon = $('circle').attr('cx');
    $('#svgsketch').bind('mousemove' , mousemove);
    $('#svgsketch').bind('mouseup' , mouseup); 
});
var mouseup= function(event){
    $('#temp').css('display' , 'none');
    dashArray = '0'
    event.preventDefault();
	event = event.target;
	cx = event.getAttribute('cx');
	cy = event.getAttribute('cy');	
    group = event.parentNode.getAttribute('id');    
	$('#line3').html(cx);
	$('#line4').html(cy);
    $('#svgsketch').unbind('mousemove' , mousemove); 
	sketchpad.line($("#"+group), $('#line1').html(),$('#line2').html(),$('#line3').html(),$('#line4').html(),{fill:"red",role:"dragshape",stroke:"red",strokeWidth:1,strokeDashArray:dashArray});	     
 
    x1 = line.getAttribute('x1');
    x2 = line.getAttribute('x2');
    y1 = line.getAttribute('y1');
    y2 = line.getAttribute('y2');    
    valueX1 = (parseInt(x2) + parseInt(x1)) / 2 ;
    valueY1 = (parseInt(y2) + parseInt(y1)) / 2 ;
    valueX2 = parseInt(valueX1) - 5;
    valueY2 = parseInt(valueY1) - 10;
    valueX2bis = parseInt(valueX1) - 10;    
    valueY2bis = parseInt(valueY1) + 5; 
    $('#temp').css('display' , 'none');    
};
var mousemove = function(event){
    $("#temp").css('display' , 'block');
    var destinationX = parseInt(event.pageX) - parseInt($('#svgsketch').offset().left);  
    var destinationY = parseInt(event.pageY) - parseInt($('#svgsketch').offset().top);     
    sketchpad.change(line, {x1:$('#line1').html(), y1:$('#line2').html(), x2:destinationX, y2:destinationY});
};

Quand j’essaye de relier deux formes entre elles et qu'ensuite je tente de les bouger, je vois quand même ma ligne (mousemove de liaison)

Merci de votre aide

11/03/2013, 22h21
danielhagnoul

Bonsoir

Il ne faut pas inclure des gestionnaires d'évènements dans des fonctions qui sont appelées plus d'une fois, sinon vous créez de nouveaux gestionnaires d'évènement lors de chaque appel de fonction.
12/03/2013, 08h52
Meloooo

Hum, je comprends mais comment faire dans mon cas ?
Car j'ai plusieurs boutons qui mènent vers mes fonctions, et l'utilisateur peut cliquer plusieurs fois sur ces boutons au cours de sa création.

Merci de votre réponse.
12/03/2013, 10h26
danielhagnoul

Bonjour

C'est votre manière de concevoir l'enchaînement des actions qui est erronée.

La page web est un environnement asynchrone.

Après les actions initiées par l'ouverture de la page, c'est toujours l'utilisateur et lui seul qui décide et qui agit.

Chaque action de l'utilisateur peut activer un gestionnaire d'événement qui doit toujours agir sur la page web de manière asynchrone.

Le concepteur de la page doit inclure ses enchaînements d'actions asynchrones dans le code d'un gestionnaire d'événement qui sera initié par une action de l'utilisateur.

Exceptionnellement, car le comportement de la page web ne doit pas dérouter l'utilisateur, on peut déclencher un gestionnaire d'événement avec la méthode trigger( eventType ).
12/03/2013, 14h11
Meloooo

Au risque de paraitre stupide, je ne saisi pas tout ...
Je pense que je dois m'inspirer de ca :
http://danielhagnoul.developpez.com/.../evenement.php
mais je vous avoue que j'ai un peu de mal...
Merci de votre aide
13/03/2013, 23h38
danielhagnoul

Bonsoir

J'essaye simplement de vous expliquer pourquoi il faut revoir la conception de votre programme en partant des évènements créés par l'utilisateur et non de vos fonctions.
14/03/2013, 09h07
Meloooo

Bonjour,
Merci de votre réponse.
J'ai souvent le même sélecteur sur des boutons différents, qui ne fait donc pas la même action.
Que me conseillez-vous ?
Pour chaque bouton, d'avoir un sélecteur différent ?
14/03/2013, 22h24
danielhagnoul

Bonsoir

L'évènement "click" est le plus courant, mais le code du gestionnaire est généralement différent.

Si on prend l'exemple de l'évènement "click" sur une série de "checkbox", il y aura probablement une partie commune ou même un seul gestionnaire d'évènement.

Il n'y a pas une règle absolue, la réponse dépend de l'action à entreprendre et du contexte (HTML, CSS, JS).
19/03/2013, 08h40
Meloooo

Bonjour,
Merci pour vos conseils danielhagnoul, j'ai donc revu mes actions.
Lorsque l'utilisateur clic sur ma zone de dessin, j'intercèpte l'élement sur lequel il vient de cliquer et j'éxecute une action (si c'est sur des cercles, alors on fait une liaison, si c'est sur l'entête alors on le fait bouger ... )

Encore merci.