1

자바 스크립트를 사용하여 이벤트 리스너를 추가하고 제거하는 방법을 이해하려고하지만 예상대로 작동하지 않습니다.이벤트 리스너 제거 javascript

캔버스 위로 마우스를 가져 가면 마우스의 x 및 y 좌표를 기록하는 콘솔이 시작되지만 마우스를 클릭 할 때 기대할 수 있습니다. coords를 기록하는 것을 멈추십시오, 그것은하지 않습니다 ... 그것은 페이지를 새로 고칠 때까지 콘솔 로깅을 계속합니다.

이 내 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> 

이 내 자바 스크립트입니다 :

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

왜 이런 작업이 아니다? 나는 이것의 약간 다른 변이를 시도하고 아무것도 작동하는 것을 보이지 않는다. 미리 감사드립니다!

답변

0

이 작동합니다 :

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/

관련 문제