jQuery 数字 increment/decrement 按像素移动，使用 mouseenter 和 mousemove

Question

我有这个jQuery。代码获取鼠标进入的坐标，偏移量从0开始：

var inc_X_by = 0, inc_Y_by = 0, total_X = 0, total_Y = 0;

$( "#mouse_over" ).mouseenter(function() {
  var $this = $(this),
      offset = $this.offset(),
      in_X = (event.clientX - offset.left),
      in_Y = (event.clientY - offset.top);

然后获取鼠标在里面移动的坐标：

  $('#mouse_over').mousemove(function(e){
    var mouse_X = (event.clientX - offset.left),
        mouse_Y = (event.clientY - offset.top);

并给出总增量+或-之差：

    inc_X_by =  mouse_X - in_X;
    inc_Y_by =  mouse_Y - in_Y;    
  });

然后当鼠标离开 div 时，每次都会将 increment/decrement 添加到总数中：

}).mouseleave(function() {
  total_X = total_X + inc_X_by;
  total_Y = total_Y + inc_Y_by;
});

这是工作jsfiddle

目前所有增量的总和仅在鼠标离开 div 时更新。但是我希望它随着鼠标在内部移动而连续更新。如果我将总计计算放入 mousemove 函数中，它会在每次更改时添加 inc 编号，即：如果 inc 增加两个像素，从 100 到 102，而不是添加 2，它会添加 100、101、102 = 303 . 差别很大

有人知道解决方案吗？

作为新手，我们也非常感谢您对代码的任何其他建议。

Answer 1

只需将您的 mousemove 代码添加到 mouseenter 函数，它会在您的 jsfiddle 中使用这些更改。

只需将您的 jquery 代码更改为以下内容：-

var inc_X_by = 0, inc_Y_by = 0, total_X = 0, total_Y = 0;

$( "#mouse_over" ).mouseenter(function() {
  var $this = $(this),
      offset = $this.offset(),
      in_X = (event.clientX - offset.left),
      in_Y = (event.clientY - offset.top);

  $('#coords_in').html("mouseenter coords = " + in_X + ", " + in_Y);

  $('#mouse_over').mousemove(function(e){
    var mouse_X = (event.clientX - offset.left),
        mouse_Y = (event.clientY - offset.top);

    $('#coords').html("mousemove coords = " + mouse_X + ', ' + mouse_Y);

    inc_X_by =  mouse_X - in_X;
    inc_Y_by =  mouse_Y - in_Y;
    $('#inc_by').html("current increment = " + inc_X_by + ", " + inc_Y_by);

        total_X = total_X + inc_X_by;
  total_Y = total_Y + inc_Y_by;
  $('#total').html("total of all increments = " + total_X + ", " + total_Y);

  });

}).mouseleave(function() {
  total_X = total_X + inc_X_by;
  total_Y = total_Y + inc_Y_by;
  $('#total').html("total of all increments = " + total_X + ", " + total_Y);
});

可能对你有帮助。

Answer 2

我通过添加一个新变量解决了这个问题：

var X_prev = 0, Y_prev = 0;

然后是 if/else 判断鼠标是否在移动的语句 l/r, h/v

if (X_prev < mouse_X) { 
    inc_X_by = 1;
  } else if (X_prev == mouse_X) {
    inc_X_by = 0;
  } else {
    inc_X_by = -1;
  };

然后将上一个鼠标位置设置为当前位置。

X_prev = mouse_X;

因此，例如，如果先前的鼠标位置小于当前位置，则鼠标向右移动，将增量设置为 +1。然后通过将总数移动到 mousemove 中，它每次触发时都会增加 +1。那么就不需要mouseenter或者mouseleave了。

完整代码如下所示，jsfiddle here:

var inc_X_by = 0, inc_Y_by = 0, total_X = 0, total_Y = 0, X_prev = 0, Y_prev = 0;

$('#mouse_over').mousemove(function(e){
    var $this = $(this),
        offset = $this.offset(),
        mouse_X = (event.clientX - offset.left),
        mouse_Y = (event.clientY - offset.top);

      if (X_prev < mouse_X) { 
          inc_X_by = 1;
      } else if (X_prev == mouse_X) {
          inc_X_by = 0;
      } else {
          inc_X_by = -1;
      };

      if (Y_prev < mouse_Y) { 
          inc_Y_by = 1;
      } else if (Y_prev == mouse_Y) {
          inc_Y_by = 0;
      } else {
          inc_Y_by = -1;
      }

      X_prev = mouse_X;
      Y_prev = mouse_Y;

      total_X = total_X + inc_X_by;
      total_Y = total_Y + inc_Y_by;
    });
})

一个主要区别是，如果鼠标跳过得非常快，则 mousemove 只会触发几次，因此您只会增加一些，而实际上您可能移动了更多。

jQuery 数字 increment/decrement 按像素移动，使用 mouseenter 和 mousemove

jQuery number increment/decrement by pixel movement, using mouseenter and mousemove

jquery

increment

mouseenter

mouseleave

mousemove