使用addEventListener添加带有参数的回调 [英] Using addEventListener to add a callback with arguments
问题描述
我正在使用画布创建拖放系统。
I'm creating a drag and drop system using a canvas.
canvas.addEventListener('mousedown', function () {
window.initialClickX = mouse.x;
window.initialClickY = mouse.y;
window.initialBallX = ball.x;
window.initialBallY = ball.y;
canvas.addEventListener('mousemove', onMouseMove, false);
}, false);
function onMouseMove(){
ball.x = mouse.x + window.initialBallX - window.initialClickX;
ball.y = mouse.y + window.initialBallY - window.initialClickY;
draw();
}
当我点击,我需要存储初始鼠标位置的值,
When I click, I need to store the values for the initial mouse position and the initial ball position, so I can correctly drag the ball around.
上面的代码工作得很完美,但我认为它看起来很乱,所有的全局变量。我想让onMouseMove能够接受参数initialClickX,initialClickY,initialBallX和initialBallY。但是如何将这些参数添加到回调函数?
The above code works perfectly, but I think it looks messy with all the global variables. I'd like onMouseMove to be able to accept the parameters initialClickX, initialClickY, initialBallX and initialBallY. But how can I add these parameters to the callback function?
或者如果有更好的方法,请让我知道,谢谢。
Or if there is a better way to do this please let me know, thanks.
推荐答案
尝试使用包装器函数。
canvas.addEventListener('mousedown', function () {
var initialClickX = mouse.x;
var initialClickY = mouse.y;
var initialBallX = ball.x;
var initialBallY = ball.y;
canvas.addEventListener('mousemove', function() {
onMouseMove(initialClickX, initialClickY, mouse.x, mouse.y, initialBallX, initialBallY)
}, false);
}, false);
function onMouseMove(initialClickX, initialClickY, mouseX, mouseY, initialBallX, initialBallY){
ball.x = mouseX + initialBallX - initialClickX;
ball.y = mouseY + initialBallY - initialClickY;
draw();
}
这篇关于使用addEventListener添加带有参数的回调的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!