是否有一种互补的方式来获得鼠标事件？

Question

通过直接使用jQuery:

如果我有一个固定的盒子(比如一个彩色的矩形),并且我将鼠标移入或移出它,如果我将鼠标光标移动到盒子的边界上,jQuery会给我一些事件.

如果我有一个以编程方式移动的彩色矩形,请向右说,我将鼠标放在框的右侧并等待,该框将在鼠标光标下移动并移过它,但不生成任何鼠标事件(或者至少是我所知道的鼠标事件).

当对象移动并且鼠标光标静止时,有什么方法可以接收与"静止物体,移动鼠标光标"在语义上相当的东西？

Answer 1

尝试创建全局变量来存储当前pageX, pageY; 利用mousemove附加到的事件设置全局变量window；使用optionsstep属性.animate()计算动画元素的当前位置，引用offsetLeft, offsetTop, getBoundingClientRect().bottom; 检查当前鼠标位置相对于元素底部的 offsets 。

还可以通过在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>