Enlever une écouteur d'evenement en js
cyberMan_89
Messages postés
8
Date d'inscription
Statut
Membre
Dernière intervention
-
raisedead -
raisedead -
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:
NB: l'element Input est deplacable.
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.
A voir également:
- Enlever une écouteur d'evenement en js
- Enlever pub youtube - Accueil - Streaming
- Comment enlever une page sur word - Guide
- Enlever notification whatsapp pour une personne - Guide
- Son dans un seul écouteur avec fil ✓ - Forum iPhone
- Homday x-pert écouteur bluetooth notice ✓ - Forum Casque et écouteurs
1 réponse
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.
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.