jquery - 将参数和事件传递给处理函数

Question

我有以下似乎可以工作的代码。

box.bind('mousedown' , function(event){
    box.css('background-color' , '#ff00ff');
    box.bind('mousemove' , movehandler);
});

function movehandler(event){
    box.css('background-color' , '#ffff00');
    // do things to move div            
}

但是，当我尝试以下操作并将参数传递给movehandler函数时，事情似乎不想工作。

box.bind('mousedown' , function(event){
    box.css('background-color' , '#ff00ff');        
    startY = event.pageY;
    boxtop = box.position().top;
    box.bind('mousemove' , boxhandler(startY, boxtop));
}); 

function boxhandler(a, b) {
    box.css('background-color' , '#ffff00');
    dist = (event.pageY - a);
    var val = b + dist;
    box.css('WebkitTransform' , 'translate(0px, '+ val +'px)');
}

那么是否可以将参数/参数传递给处理函数并保留与实际事件相关的信息？

Answer 1

请注意，正如您所拥有的那样，每次 mousedown 发生时都会完成 mousemove 的绑定box.bind('mousemove'。box.bind('mousedown'

您可以尝试以下方法：

var startY = null;
var boxtop = null;
// Start moving
box.bind('mousedown' , function(event) {
  box.css('background-color' , '#ff00ff');        
  startY = event.pageY;
  boxtop = box.position().top;
});

// Finish moving
box.bind('mouseup', function() {
  startY = null;
  boxtop = null;
});

// Handle moving
box.bind('mousemove' , boxhandler);


function boxhandler(event) {
  if (startY !== null) {
    box.css('background-color' , '#ffff00');
    dist = (event.pageY - startY);
    var val = boxtop + dist;
    box.css('WebkitTransform' , 'translate(0px, '+ val +'px)');
  }
}