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

请注意，由于box.bind('mousemove'内有box.bind('mousedown'，因此每次发生mousedown时都会对mousemove进行绑定。

您可以尝试以下内容：

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

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

1 个答案: