刪除鼠標事件監聽器點擊

我看到其他類似的問題，但答案並沒有真正解決問題。刪除鼠標事件監聽器點擊

我有這樣的事件偵聽器：

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）; –

刪除鼠標事件監聽器點擊

回答

相關問題