0

我要做的是创建一个函数，只要按住鼠标按钮，它就会连续调用另一个函数。我这样做只是为了更好地理解 .call() 和回调。这是我的代码：

jQuery.fn.contmousedown = function(mousedownCallback){
  var interval, self = this;
  jQuery(this).mousedown(function(event){
    interval = setInterval(function(self, event){
      mousedownCallback.call(self, event);
      console.log('on');
    },0);
  });
  jQuery(this).mouseup(function(event){
    clearInterval(interval);
  });
}

$(document).contmousedown(function(e){
  $('#run').html(e.pageX+', '+e.pageY);
});

我收到的错误是：

Uncaught TypeError: Cannot read property 'pageX' of undefined

当然，我每秒接收大约 300 倍。:) 如果我将间隔声明行更改为，interval = setInterval(function(self){那么我会以大约每秒 300 倍的速度“打开”登录到我的控制台，但我会丢失事件。所以我的问题是我怎样才能做到，以便我可以回调函数并将事件参数传递给它？

示例 - http://jsfiddle.net/ZxKxD/

在通勤回家的路上考虑到这一点，我决定保留这两项活动会很好。所以这是我的最终代码：

jQuery.fn.mousehold = function(mousedownCallback){
  var interval, self = this, move_event;
  jQuery(this).mousemove(function(e){
    move_event = e;
  });
  jQuery(this).mousedown(function(click_event){
    interval = setInterval(function(){
      mousedownCallback.call(self, click_event, move_event);
    },0);
  });
  jQuery(this).mouseup(function(){
     clearInterval(interval);
  });
  jQuery(this).mouseout(function(){
     clearInterval(interval);
  });
}

$(document).mousehold(function(click_event, move_event){
  $('#run').html(click_event.pageX+':'+move_event.pageX+', '
                +click_event.pageY+':'+move_event.pageY);
});
4

1 回答 1

4

setInterval不将参数传递给回调，因此删除selfandevent参数。这样做不会“丢失”事件。

$.fn.contmousedown = function(mousedownCallback)
{
    var interval,
        self = this;

    $(this).mousedown(function(event)
    {
        interval = setInterval(function()
        {
            mousedownCallback.call(self, event);
            console.log('on');
        }, 0);
    });

    $(this).mouseup(function()
    {
        clearInterval(interval);
    });
}

演示：http: //jsfiddle.net/mattball/9veUQ

那么如何获得光标位置的持续更新呢？

用于mousemove捕获事件。

$.fn.contmousedown = function(mousedownCallback)
{
    var interval,
        self = this,
        event;

    $(this).mousemove(function(e)
    {
        event = e;
    });

    $(this).mousedown(function ()
    {
        interval = setInterval(function()
        {
            mousedownCallback.call(self, event);
        }, 0);
    });

    $(this).mouseup(function()
    {
        clearInterval(interval);
    });
};

演示：http: //jsfiddle.net/mattball/dVaWS/

于 2012-08-03T23:03:59.157 回答