删除事件侦听器javascript_Javascript_Javascript Events_Mouseevent_Addeventlistener

删除事件侦听器javascript

javascript

删除事件侦听器javascript,javascript,javascript-events,mouseevent,addeventlistener,Javascript,Javascript Events,Mouseevent,Addeventlistener,我试图理解如何使用javascript添加和删除事件侦听器，但它并没有像我预期的那样工作我认为应该发生的是，当我在画布上移动鼠标时，它会开始控制台记录鼠标的x坐标和y坐标，它会这样做，但我也希望当我单击鼠标时，它会停止记录坐标，它不会这样做……它只会在刷新页面之前保持控制台记录坐标这是我的html： <!DOCTYPE html> <html> <head> <title> My Canvas </title>

我试图理解如何使用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>

为什么这不起作用？我尝试过其他一些变化，但似乎没有任何效果。提前谢谢

这应该有效：

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);
}

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);
}