删除事件监听器 Javascript答案

【问题标题】：Remove event listeners Javascript删除事件监听器 Javascript
【发布时间】：2013-10-16 20:02:15
【问题描述】：

我正在尝试了解如何使用 Javascript 添加和删除事件侦听器，但它并没有像我预期的那样工作。

我认为应该发生的是，当我将鼠标移到画布上时，它会开始控制台记录鼠标的 x 和 y 坐标，它确实如此，但我也希望当我单击鼠标时，它应该停止记录坐标，它没有...它只是让控制台记录坐标，直到我刷新页面。

这是我的html：

<!DOCTYPE html>
<html>
  <head>
    <title> My Canvas </title>
    <link rel="stylesheet" type="text/css" href="test_eventhandlers.css">
    <script src="test_eventhandlers.js" type="text/javascript"></script>    
  </head>
  <body>
    <canvas id="myCanvas" width="640" height="360"></canvas>
  </body>
</html>

这是我的javascript：

window.onload = function(){
  var myCanvas = document.getElementById("myCanvas");
  myCanvas.addEventListener('mousemove', consoleCoordsMouseMove, false);
  myCanvas.removeEventListener('click', consoleCoordsMouseMove, false);

  function consoleCoordsMouseMove(){
    var x=event.x;
    var y=event.y;
    console.log("mousemove: " + x + " and " + y);
  }
};

为什么这不起作用？我已经尝试了其他一些变体，但似乎没有任何效果。

【问题讨论】：

标签： javascript dom-events mouseevent addeventlistener

【解决方案1】：

这应该可行：

var myCanvas = document.getElementById("myCanvas");
myCanvas.addEventListener('mousemove', consoleCoordsMouseMove, false);
myCanvas.addEventListener('click', function () {
    this.removeEventListener('mousemove', consoleCoordsMouseMove, false);
}, false);

function consoleCoordsMouseMove(e) {
    var x = event.x;
    var y = event.y;
    console.log(x + ',' + y);
}

http://jsfiddle.net/Nmcgt/1/

【讨论】：