有没有一种补充方法可以获取类似鼠标事件的东西？

Question

使用jQuery很容易实现：

如果我有一个静态的方框（比如，一个有颜色的矩形），当鼠标移动到方框边缘时，jQuery会给出事件。

如果我有一个有颜色的矩形并且正在被程序化地向右移动，当我把鼠标放在方框的右侧等待时，方框会移动到鼠标光标下面并超过它，但是不会生成任何鼠标事件（或者至少是我不知道的鼠标事件）。

对于物体正在移动而鼠标光标静止的情况，是否能够接收到类似于“静态物体，移动鼠标光标”的语义等效内容？有哪些方法可以实现呢？

- Christos Hayward

---

你正在使用画布吗？我在这方面没有太多经验，但是使用画布，我相信你可以存储当前鼠标位置的坐标，并根据框的变化位置计算碰撞。 - html_programmer

作为一个资源：有一本书叫做《Foundation HTML5 Animation with JavaScript》，它很好地描述了如何使用画布实现这个（以及更多）。 - html_programmer

非常好的问题！能否提供一个带有jsfiddle或代码片段的示例？ - Gavriel

@KimGysen 我喜欢Canvas并且已经成功地使用它，但在这种情况下我正在进行老式的DOM操作。 - Christos Hayward

@Gavriel 我现在有的，在jonathanhayward.com上有点深藏不露。在黑白之间进行几次初始淡入淡出后，移动图像将出现在静止的背景上。鼠标悬停在其中一张图片上，就会出现一个（jQuery UI）工具提示。但是，正如你从问题中猜到的那样，如果你将鼠标悬停在图片上，然后拔掉鼠标或离开它不管，工具提示将保持为你已经悬停在其上的图像并继续通过光标移动。 - Christos Hayward

Answer 1

尝试创建全局变量来存储当前的pageX和pageY；利用附加到window的mousemove事件设置全局变量；使用.animate()选项的step属性来计算动画元素的当前位置，引用offsetLeft，offsetTop，getBoundingClientRect().bottom；根据偏移量和元素底部检查当前鼠标位置。在mousemove事件处理程序中执行相同的检查也可以补充此过程。

var x = 0,
  y = 0;
$(window).on("mousemove", function(e) {
  x = e.pageX;
  y = e.pageY
})
$("div")
  .animate({
    left: window.innerWidth - 150
  }, {
    duration: 5000,
    step: function() {
      var l = this.offsetLeft,
        t = this.offsetTop,
        b = this.getBoundingClientRect().bottom;
      // if element passes over mouse, log positions to `console`
      if ((x === l || x === l + 1 || x === l - 1) && y > t && y < b)
        console.log("pageX:", x
                    , "pageY:", y
                    , "offsetLeft:", l
                    , "offsetTop:", t
                    , "BoundingClientRect().bottom:", b)
    }
  })

div {
  width: 100px;
  height: 100px;
  background: olive;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div></div>

- guest271314

Answer 2

如果您使用此代码片段，您可以获取鼠标坐标：

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
}

接下来，您可以为其设置一个间隔，并根据鼠标坐标和您的坐标计算矩形的坐标和轨迹。这是我能想到的。

- Simply Me

Answer 3

由于它是移动的对象，因此它是可能发生碰撞事件以及鼠标移动的发起者。在每一帧中，使用requestAnimationFrame()，对象应该检查它是否与鼠标的当前位置发生碰撞。

我记不得有现成的jQuery解决方案，但只需要几行代码即可实现，并触发自定义命名的jQuery事件。

更新。我在下面草拟了一个简单的演示。Div在跟踪鼠标位置的框内左右弹跳。在示例中仅检查水平位置是否发生碰撞。将鼠标指针移动到弹跳正方形的路径上并保持静止。当碰撞发生时，正方形变为红色，当其离开时变为灰色。

注意事项。在JS中，没有办法在不移动鼠标的情况下获取鼠标位置-然后它会发出带有坐标的事件。因此，在页面加载后，直到鼠标移动至少一次，检测才会发生。

var $cont = $('#container') 
  ,$out = $('#out')
  ,$el = $('#bouncer')
  ,mouse = { x: -1, y: -1}
  ,bouncer = {x: -1, y: -1}
;

function updateMousePos(e) {
  mouse.x = e.offsetX;
  mouse.y = e.offsetY;
  collisionTest();
}
$cont.on('mousemove', updateMousePos);

// swing it right-left endlessly
function toRight() { $el.animate({left:180}, 2000, 'swing', toLeft);} 
function toLeft() { $el.animate({left:0}, 2000, 'swing', toRight);} 
toRight(); // launch animation

function collisionTest() {
  if( mouse.x > bouncer.x  &&  mouse.x < bouncer.x + 20) {
    $el.addClass('collision');
  } else {
    $el.removeClass('collision');
  }
}

// update before every frame render
function step(ts) {
  bouncer.x = parseInt($el.css('left').slice(0, -2));
  bouncer.y = parseInt($el.css('top').slice(0, -2));
  collisionTest();
  window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);

#container {position:relative; width:200px; height:50px; border:1px solid #333}
#bouncer {position:absolute;top:15px;width:20px;height:20px;background-color:#CCC;}
#out { margin-top: 60px; }
.collision {background-color:red !important}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"><div id="bouncer"></div></div>

- Serge