javascript 使用 addEventListener 添加带参数的回调
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17238348/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using addEventListener to add a callback with arguments
提问by Lars
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.
单击时，我需要存储初始鼠标位置和初始球位置的值，以便我可以正确地拖动球。
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?
上面的代码工作得很好，但我认为所有的全局变量看起来都很混乱。我希望 onMouseMove 能够接受参数 initialClickX、initialClickY、initialBallX 和 initialBallY。但是如何将这些参数添加到回调函数中呢？
Or if there is a better way to do this please let me know, thanks.
或者如果有更好的方法，请告诉我，谢谢。
回答by Mathias Lykkegaard Lorenzen
Try using a wrapper function to do it.
尝试使用包装函数来做到这一点。
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();
}
回答by Marvin Emil Brach
Use a wrapping function stub which sets the parameters:
使用设置参数的包装函数存根：
canvas.addEventListener('mousemove', function() {onMouseMove(window.initialBallX, window.initialBallY, window.initialClickX, window.initialClickY); });
回答by Alberto Zaccagni
Here is a small example of how you could do that without using global variables:
这是一个小例子，说明如何在不使用全局变量的情况下做到这一点：
function called() {
console.log(arguments);
}
function caller(funx) {
funx();
}
caller(called.bind(this, 'a', 'b'));
Basically you are setting onto calleda set of predefined parameters, in this case 'a'and 'b'.
基本上，您正在设置called一组预定义参数，在本例中为'a'和'b'。
So in your case it is something like:
所以在你的情况下，它是这样的：
canvas.addEventListener('mousedown', function () {
canvas.addEventListener('mousemove',
onMouseMovebind(this, mouse.x, mouse.y, ball.x, ball.y), false);
}, false);
