Is there an additional way to get something like mouse events?

Question

With direct use of jQuery:

If I have a stationary box (like a colored rectangle) and I move the mouse to or from it, jQuery gives me events if I move the mouse cursor over the window border anyway.

If I have a colored rectangle that moves programmatically, say to the right, and I place the mouse to the right of the window 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 know about).

What are the ways to get something semantically comparable to a “fixed object moving with a mouse cursor” when the object is moving and the mouse cursor is stationary?

Answer 1

Try creating global variables to hold the current pageX , pageY ; set global variables using the mousemove event attached to the window ; use the step property of the .animate() parameters to calculate the current position of the animated element, referring to offsetLeft , offsetTop , getBoundingClientRect().bottom ; check the current position of the mouse relative to the offsets of the bottom of the element.

You can also compliment by doing the same check inside the 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> 

Answer 2

If you use, you can take the coordinates of the mouse using this snippet:

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

After that, you can set the interval for it and calculate the coordinates and the trajectory of the rectangle based on the mouse coordinates and coordinates. This is what I could think of.

Answer 3

As an object that moves, it is the initiator of possible collision events, as well as the movement of the mouse. In each frame, using requestAnimationFrame() , the object must check to see if it is facing the current mouse position.

There are no ready-made jQuery solutions that I can recall, but implementation will require only a few lines of code, and trigger a custom jQuery event.

Update. I sketched a simple demo below. Div bounces from left to right inside the box, which tracks the position of the mouse. In the example, only the horizontal position for the collision is checked. Move the mouse pointer somewhere in the path of the jumping square and leave it motionless. The square turns red when the collision is active, and back to gray when it exits.

warnings. In JS, there is no way to get the mouse position without moving the mouse - then it emits an event with coordinates. Therefore, detection will not occur until the mouse is moved at least once after loading the page.

 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>