删除鼠标事件监听器点击

我看到其他类似的问题，但答案并没有真正解决问题。删除鼠标事件监听器点击

我有这样的事件侦听器：

function bigButton(x, y, strTxt, doFunction) 
{ 
    var getID = document.getElementById("canvas_1"); 

    if (getID.getContext) 
    { 
     var ctx = getID.getContext("2d"); 

     var btnW = 150; 
     var btnH = 50; 
     var cx = x - btnW/2; 
     var cy = y - btnH/2; 
     var left = cx; 
     var right = cx + btnW; 
     var top = cy; 
     var bottom = cy + btnH; 

     bbWhite(cx, cy, btnW, btnH, strTxt); 

     getID.addEventListener("mousemove", function bbAnim(event) 
     { 
      var mousePos = getMousePos(getID, event); 
      var rect = getID.getBoundingClientRect(); 
      var mouseX = mousePos.x; 
      var mouseY = mousePos.y; 
      if (mouseX >= left 
       && mouseX <= right 
       && mouseY >= top 
       && mouseY <= bottom) 
      { 
       bbBlack(cx, cy, btnW, btnH, strTxt); 
      } 
      else 
      { 
       bbWhite(cx, cy, btnW, btnH, strTxt); 
      } 

     }, false); 

     getID.addEventListener("click", function bbClick(event) 
     { 
      var mousePos = getMousePos(getID, event); 
      var rect = getID.getBoundingClientRect(); 
      var clickX = mousePos.x; 
      var clickY = mousePos.y; 
      if (clickX >= left 
       && clickX <= right 
       && clickY >= top 
       && clickY <= bottom) 
      { 
       doFunction(); 
      } 

     }, false); 
    } 
}

我想删除它，因为一旦我点击它，我想清楚了画布上，并做其他事情。然而，我必须有一个命名的函数来删除它。据我所知，我不能不失去匿名函数中使用的所有变量。在这种情况下，我如何拥有一个命名的监听器？这是我在学习JavaScript时遇到的第一个问题。我很惊讶这不是你在任何教程中找到的第一件事。

UPDATE：

我已经把它做成了命名函数，但我还是没有办法单击该按钮后，将其删除（和mousemove事件）。

来源

2014-04-05 Nathan McKaskle

如果我以后不想删除它，该怎么办？例如，我有一个类似的事件，我想删除一个鼠标移动事件，但只有在点击该按钮后。如果我在点击事件的处理程序中删除它，它不再起作用。 –

我不能，那最终会回答我自己的问题。另外，从处理程序中删除它会打破该事件。它不起作用。试图将它从功能范围之外移除，它甚至不知道我在说什么。人们如何做到这一点？ –

我更新了更多的上下文。如果我添加this.removeEventHandler（“mousemove”，bbClick，false）;到事件功能，它会中断。它不再有效。当我点击它时，它不再做任何事情。按钮鼠标悬停动画也会发生同样的情况。如果我尝试删除传递的doFunction（）事件中的事件处理程序，它也不起作用。我希望JavaScript控制台能告诉我更多，但它并没有告诉我任何事情。 –

删除它几乎是一样将它添加

getID.addEventListener("click", handler, false); 

function handler(event) { 

    this.removeEventListener('click', handler, false); 

    var mousePos = getMousePos(getID, event); 
    var rect = getID.getBoundingClientRect(); 
    var clickX = mousePos.x; 
    var clickY = mousePos.y; 
    if (clickX >= left 
     && clickX <= right 
     && clickY >= top 
     && clickY <= bottom) 
    { 
     doFunction(); 
    } 
}

和this事件和值保持不变羯羊或不按名称引用与否。

来源

2014-04-05 17:44:00 adeneo

这不起作用。事件监听器使用该函数的变量添加到另一个函数中。左，右，上，下，它们都在该函数之外定义。 –

好吧，我不知道其他函数是什么样子，或者变量来自哪里，你必须弄清楚，重点是只要你有元素，无论是在getID或任何其他变量包含相同的元素以及对绑定函数的命名引用，这可以通过多种方式实现，事件处理程序可以像添加一样轻松删除。 – adeneo

尽管变量来自哪里应该没有关系。从事件的角度来看，它们只是重要的一部分。如果事件在变量的整个范围外命名一个函数，那么我就没办法想到利用事件本来应该做的事情。显然我不能像下面这样传递变量：getID.addEventListener（“click”，handler（getID，left，right，top，bottom），false）; –

删除鼠标事件监听器点击

回答

相关问题