函数不会从 eventListener 中删除

Question

问题是我无法从 eventListener 中删除函数。我有以下来自 class 的方法：

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" 事件。但是当用户移出元素或结束按住鼠标或触摸此元素时（简单地 - 结束调整大小或拖动元素）我需要从 "move" 事件中删除 eventHandler，但这并没有发生。问题 - 为什么以及如何解决这个问题？

Answer 1

如果这是您要删除的两个事件

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

那你需要打电话 .removeEventListener('event', namedFunction, options) 代替 .addEventListener(event, namedFunctions, options) 重要的是你只能从事件监听器中删除命名函数，如果我没记错的话，你不能删除处理事件的匿名函数

Answer 2

问题是我试图删除 "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);
};
}

函数不会从 eventListener 中删除

Function doesnt remove from eventListener

javascript

event-listener