Функция не удаляет из EventListener

Question

Проблема в том, что я не могу удалить функцию из EventListener. У меня есть следующий метод из класса:

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);
};
}

Этот метод получает узел, который имеет элемент ("span"). Этот элемент изменяет размер, если пользователь нажимает на его границу или перемещается, если он нажимает на его внутреннее тело. Как вы можете видеть, когда пользователь нажимает на элемент, он получает позицию курсора и затем решает, какую функцию использовать для события «move». Но когда пользователь переместил элемент или прекратил удерживать мышь или коснулся этого элемента (просто - закончил изменение размера или перетаскивание элемента), мне нужно удалить eventHandler из события «move», но этого не происходит. Вопрос - почему и как это исправить?

Answer 1

Проблема заключалась в том, что я пытался удалить функцию "eventHandler", но мне нужно удалить любую из функций "move", "risizeleft" и "resizeright".Чтобы решить эту проблему, я создал переменную, которая имеет имя текущей функции и удаляет ее из события «move», когда это необходимо.

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);
};
}

Answer 2

если это два события, которые вы пытаетесь удалить

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

тогда нужно позвонить .removeEventListener('event', namedFunction, options) вместо .addEventListener(event, namedFunctions, options) Важно отметить, что вы можете удалить только именованные функции из прослушивателя событий, вы не можете удалить анонимную функцию, которая обрабатывает событие, если я правильно помню