Is there a complementary way to get something like mouse events?

Question

With straightforward usage of jQuery:

If I have a stationary box (say, a colored rectangle), and I move the mouse in or out of it, jQuery gives me events if I move the mouse cursor over the boundary of the box one way or the other.

If I have a colored rectangle that is being programmatically moved, say to the right, and I place the mouse to the right of the box and wait, the box will move under the mouse cursor and move past it, but without generating any mouse events (or at least mouse events that I am aware of).

What, if any, ways are there to receive something semantically comparable to the "stationary object, moving mouse cursor" for when the object is moving and the mouse cursor is stationary?

Answer 1

Try creating global variables to store current pageX, pageY ; set global variables utilizing mousemove event attached to window ; use step property of .animate() options to calculate current position of animated element , referencing offsetLeft , offsetTop, getBoundingClientRect().bottom ; check for current mouse position in relation to offsets , bottom of element.

Could also compliment process by performing same check within mousemove event handler

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>