Le problème est que je ne peux pas supprimer une fonction de l'EventListener. J'ai la méthode suivante de la classe :

setNavigator(nav){
renderNavigatorGraphic(nav.querySelector("canvas"));

var span = nav.querySelector(".graphic-overview > .selector > span"),
    selectorWidth = this.selectorWidth = span.clientWidth,
    selectorBorder = this.selectorBorder = parseFloat(
                          getComputedStyle(span, "::before")
                          .getPropertyValue("border-left-width")
                        ),
    eventNames = (isMobileDevice())
                    ?["touchstart", "touchmove", "touchend"]
                    :["mousedown", "mousemove", "mouseup", "mouseleave"];

span.addEventListener(eventNames[0], eventHandler, false);
span.addEventListener(eventNames[2], removeEventHandler, false);
if(eventNames[3]) span.addEventListener(eventNames[3], removeEventHandler, false);

function resizeleft(){console.log("left");}
function resizeright(){console.log("right");}
function move(){console.log("move");}
function renderNavigatorGraphic(canvas){ console.log(canvas) }
function eventHandler(e){
  var x = e.offsetX,
      eventName = eventNames[1];

  if(x > selectorBorder){
    if(x < (selectorWidth - selectorBorder)){
      console.log("move");
      span.addEventListener(eventName, move, false);
    }else{
      console.log("resizeRight");
      span.addEventListener(eventName, resizeright, false);
    }
  }else{
    console.log("resizeLeft");
    span.addEventListener(eventName, resizeleft, false);
  }
}
function removeEventHandler(){
  console.log("removeEvent", this, eventHandler);
  span.removeEventListener(eventNames[1], eventHandler);
}
function isMobileDevice() {
  return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
};
}

Cette méthode obtient des nœuds qui ont un élément ("span"). Cet élément se redimensionne si l'utilisateur clique sur sa bordure ou se déplace s'il clique sur son corps interne. Comme vous pouvez le voir, lorsque l'utilisateur clique sur l'élément, il obtient une position de curseur et décide ensuite quelle fonction utiliser pour l'événement "déplacer". Mais lorsque l'utilisateur a déplacé l'élément ou a fini de tenir une souris ou de toucher cet élément (simplement - fini de redimensionner ou de faire glisser l'élément), je dois supprimer le eventHandler de l'événement "move", mais cela ne se produit pas. La question - pourquoi et comment y remédier ?

-1
Dimas Karpus 14 mars 2019 à 15:59

2 réponses

Meilleure réponse

Si ce sont les deux événements que vous essayez de supprimer

span.addEventListener(eventNames[2], removeEventHandler, false);
if(eventNames[3]) span.addEventListener(eventNames[3], removeEventHandler, false);

Alors tu dois appeler .removeEventListener('event', namedFunction, options) à la place de .addEventListener(event, namedFunctions, options) point important à retenir, vous ne pouvez supprimer que les fonctions nommées d'un écouteur d'événement, vous ne pouvez pas supprimer une fonction anonyme qui gère l'événement si je me souviens bien

0
Michael Cacciano 14 mars 2019 à 13:05

Le problème était que j'ai essayé de supprimer la fonction "eventHandler", mais je dois supprimer l'une des fonctions "move", "risizeleft" et "resizeright". Pour résoudre ce problème, j'ai créé une variable qui porte le nom de la fonction actuelle et la supprime de l'événement "move" lorsque cela est nécessaire.

setNavigator(nav){
renderNavigatorGraphic(nav.querySelector("canvas"));

var span = nav.querySelector(".graphic-overview > .selector > span"),
    selectorWidth = this.selectorWidth = span.clientWidth,
    selectorBorder = this.selectorBorder = parseFloat(
                          getComputedStyle(span, "::before")
                          .getPropertyValue("border-left-width")
                        ),
    eventNames = (isMobileDevice())
                    ?["touchstart", "touchmove", "touchend"]
                    :["mousedown", "mousemove", "mouseup", "mouseleave"],
    functionHandler;

span.addEventListener(eventNames[0], eventHandler, false);
span.addEventListener(eventNames[2], removeEventHandler, false);
if(eventNames[3]) span.addEventListener(eventNames[3], removeEventHandler, false);

function resizeleft(){console.log("left");}
function resizeright(){console.log("right");}
function move(){console.log("move");}
function renderNavigatorGraphic(canvas){ console.log(canvas) }
function eventHandler(e){
  var x = e.offsetX,
      eventName = eventNames[1];

  if(x > selectorBorder){
    if(x < (selectorWidth - selectorBorder)){
      functionHandler = move;
    }else{
      functionHandler = resizeright;
    }
  }else{
    functionHandler = resizeleft;
  }

  span.addEventListener(eventName, functionHandler, false);
}
function removeEventHandler(){
  span.removeEventListener(eventNames[1], functionHandler);
}
function isMobileDevice() {
  return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
};
}
0
Dimas Karpus 14 mars 2019 à 13:44