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，但这不会发生。问题-为什么以及如何解决？

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中删除

2 个答案: