Menu

Enlever une écouteur d'evenement en js

Messages postés
8
Date d'inscription
vendredi 8 mars 2019
Statut
Membre
Dernière intervention
11 juillet 2019
-
Bonjour,

J'ai créé une plugin en jQuery et ce plugin fait un ajout de l'élement comme une input par exemple et le tracer vectoriel dans le container! le problème est que le trace vectoriel appel des événement comme mouseup, mousemove, mousedown sur le container et quand j'ajoute des élément comme des input et que je le déplace avec des l'évenement mouseup, mousemove,... ça trace des dessin vectoriel et je voulais l'enlever cette événement avec removeEventListener mais ça ne marche pas.
Voici une petite capture d'écran:


et voila le code que j'utilise:

//ajout de note ou input
this.addNote = function(text,page,posX,posY,dimensionX){
               
               me.drawingVectoriel(false);
//reste du code pas utile

};

//tracer vectoriel
this.drawingVectoriel = function(isDrawing)
        {   
            var pdfClass = document.getElementsByClassName("PDFPage");

            var svg;
            var svgPath;
            var tab_point = [];
            var tab_p = [];
            var group;
            var clicked = false;
  
            if(isDrawing)//si c'est vrai, on active l'ecouteur
            {
                for(var i=0; i<pdfClass.length; i++)
                {
                    pdfClass[i].addEventListener('mousedown',startDrawTouch, true);
                    pdfClass[i].addEventListener('mousemove',continueDrawTouch, true);
                    pdfClass[i].addEventListener('mouseup',endDrawTouch, true);
                } 
            }
            else//sinon, on enleve l'écouteur
            {
   
                for(var i=0; i<pdfClass.length; i++)
                {
                    pdfClass[i].removeEventListener('mousedown',startDrawTouch, true);
                    pdfClass[i].removeEventListener('mousemove',continueDrawTouch, true);
                    pdfClass[i].removeEventListener('mouseup',endDrawTouch, true);
                }
            }

            function startDrawTouch(event) 
            {
                clicked = true;
                var touch = event;

                svg = createSvgElement("svg");
                svg.style.position="absolute";
                svg.style.left = (touch.clientX - $(this).offset().left)+'px';
                svg.style.top = (touch.clientY - $(this).offset().top)+'px';
                svg.style.width = 0+'px';
                svg.style.height = 0+'px';
                

                group = createSvgElement("g");


                svgPath =  createSvgElement("path");
                svgPath.setAttribute("id",null);
                svgPath.setAttribute("data","line"+new Date().getTime());
                svgPath.setAttribute("fill", "none");
                svgPath.setAttribute("shape-rendering", "geometricPrecision");
                svgPath.setAttribute("stroke-linejoin", "round");
                svgPath.setAttribute("stroke", "rgb(36, 131, 199)");
                svgPath.setAttribute("stroke-width", "7");

                line.color = 'rgb(36, 131, 199, 1)';
                line.key = 'line'+new Date().getTime();
                line.page = pageConcerner;

                svgPath.setAttribute("d", "M" + $(svg).offset().left + "," + $(svg).offset().top);  

                group.appendChild(svgPath);
                svg.appendChild(group);
                this.appendChild(svg);

                tab_point.push({x:parseInt(touch.clientX) , y: parseInt(touch.clientY)});
                tab_p.push([parseInt(touch.clientX), parseInt(touch.clientY)]);
            }

            function continueDrawTouch(event) 
            {
                if(!clicked)
                {
                    return;
                }

                if (svgPath)
                {
                  var touch = event;
                  var tab_x=[],tab_y=[],w,h,x,y;

                  tab_point.push({x:parseInt(touch.clientX) , y: parseInt(touch.clientY)});
                  tab_p.push([parseInt(touch.clientX), parseInt(touch.clientY)]);


                  for(var point in tab_point)
                  {
                    tab_x.push(parseInt(tab_point[point].x));
                    tab_y.push(parseInt(tab_point[point].y));
                  }

                  x= Math.min(...tab_x);
                  y=Math.min(...tab_y);

                  w = Math.max(...tab_x) - x;
                  h = Math.max(...tab_y) - y;

                  svg.style.width = (w+15)+'px';
                  svg.style.height = (h+15)+'px';
                  svg.style.left = ((x-$(this).offset().left)-5)+'px';
                  svg.style.top = ((y-$(this).offset().top)-5)+'px';

                  var pathData = svgPath.getAttribute("d");  
                  pathData = pathData + " L" + (touch.clientX - $(svg).offset().left) + "," + (touch.clientY - $(svg).offset().top);
                  svgPath.setAttribute("d", pathData); 
                  
                  
                }
            }

            function endDrawTouch(event) 
            {
                if(svgPath)
                {
                  clicked = false;
                  var touch = event;

                  var pathData = svgPath.getAttribute("d");  
                  pathData = pathData + " L" + (touch.clientX - $(svg).offset().left) + "," + (touch.clientY - $(svg).offset().top);
                  svgPath.setAttribute("d", pathData);

                  tab_p.push([parseInt(touch.clientX), parseInt(touch.clientY)]);
                  line.points = tab_p;

                  me.addLine(line.points, line.page, line.color, line.weight);
                  //$(svg).draggable().resizable();

                  svg = null;
                  svgPath = null;
                  tab_point = [];
                  tab_p = [];
                  
                }
            }

            function createSvgElement(tagName)
            {
                return document.createElementNS("http://www.w3.org/2000/svg", tagName);
            }
        


NB: l'element Input est deplacable.
Afficher la suite 

1 réponse

0
Merci
Bonjour,
il faut utiliser removeEventListener comme ceci, en ayant obligatoirement la fonction utilisée qui doit être nommée(2ème paramètre) ce qui semble être le cas dans votre code:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

Avec Jquery je ne sais plus l'équivalent, ça doit être .bind / .undind mais là n'est pas la question;

Quel est l'erreur affichée ou ce qui ne marche pas?
Personnellement je ferais des fonctions paramétrables pour start/continue/end/DrawTouch avec comme paramètre la cible plutôt qu'une boucle f o r générique. ça me semble plus propre (moins de ressources, code plus clair et simple à écrire) et surtout plus facile à debug.


ps.: en quoi changer l'input de place change quoi que ce soit, tant que le sélecteur est bon...
ps2.: à quoi sert le bubbling (3ème paramétre == true dans le .addEventListener), autant s'en passer sauf si le parent de la cible doit recevoir un quelconque événement.
Commenter la réponse de raisedead