有没有一种互补的方式来获得类似鼠标事件的东西？答案

【问题标题】：Is there a complementary way to get something like mouse events?有没有一种互补的方式来获得类似鼠标事件的东西？
【发布时间】：2016-02-14 20:19:07
【问题描述】：

直接使用 jQuery：

如果我有一个固定的框（例如，一个彩色矩形），并且我将鼠标移入或移出它，如果我将鼠标光标以一种或另一种方式移动到框的边界上，jQuery 会给我事件。

如果我有一个正在以编程方式移动的彩色矩形，比如说向右，我将鼠标放在框的右侧并等待，框将在鼠标光标下移动并越过它，但不会生成任何鼠标事件（或至少我知道的鼠标事件）。

当对象移动且鼠标光标静止时，有什么方法可以接收语义上类似于“静止对象，移动鼠标光标”的内容？

【问题讨论】：

您在使用画布吗？我对此没有太多经验，但使用画布我确信您可以存储当前鼠标位置的坐标并根据框的变化位置计算碰撞。
作为资源：有一本书'Foundation HTML5 Animation with JavaScript'描述了如何使用画布很好地实现这一点（以及更多）。
非常好的问题！是否有可能得到一个 jsfiddle 或 sn-p ？
@KimGysen 我喜欢 Canvas 并利用它发挥了很大的优势，但在这种情况下我正在做老式的 DOM 操作
@Gavriel 我现在在 jonathanhayward.com 上拥有的东西，有点被埋没了。在黑色和白色之间的一些初始淡入淡出之后，在静止的背景上有移动的图像。将鼠标悬停在其中一张图像上，将出现一个 (jQuery UI) 工具提示。但是，正如您可能从问题中猜到的那样，如果您将鼠标悬停在图像上，然后拔下鼠标或不理会它，则工具提示将保留为您将鼠标悬停的图像移过光标。

标签： javascript jquery

【解决方案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>

【讨论】：

【解决方案2】：

如果你使用你可以用这个 sn-p 获取鼠标坐标：

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

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

【讨论】：

【解决方案3】：

作为移动的对象，它是可能的碰撞事件的发起者，也是鼠标移动的发起者。在每一帧上，使用requestAnimationFrame()，对象应该检查它是否与鼠标的当前位置发生碰撞。

我记得没有现成的 jQuery 解决方案，但它应该只需要几行代码来实现，并且 trigger 一个自定义命名的 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>

【讨论】：