刪除事件監聽器javascript

我想了解如何添加和刪除使用JavaScript的事件監聽器，但它不像我期望的那樣工作。刪除事件監聽器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); 
    } 
};

爲什麼不是這方面的工作？我已經嘗試了一些其他的變化，似乎沒有任何工作。提前致謝！

來源

2013-10-16 Robert

這應該工作：

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/

來源

2013-10-16 20:14:39

刪除事件監聽器javascript

回答

相關問題