我正在尝试了解如何使用javascript添加和删除事件侦听器,但它并不像我期望的那样工作。
我认为应该发生的是当我将鼠标移到画布上时,它会启动控制台记录我的鼠标的x和y坐标,但是我也希望当我点击鼠标时,它应该停止记录coords,它不会...它只是让控制台记录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>
这是我的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);
}
};
为什么这不起作用?我已经尝试了其他一些变体,似乎没有任何效果。提前谢谢!
答案 0 :(得分: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);
}