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

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?

---

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>

---

If you use You could take the mouse coordinates with this snippet:

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

Following this, you could set an interval for it and calculate your rectangle's coordinates and trajectory based on mouse coordinates and your coordinates. This is what I could think at.

---

As its the object that's moving, it is the initiator of possible collision events, as well as the mouse move. On every frame, using requestAnimationFrame() , the object should check if it is colliding with the mouse's current position.

No ready-made jQuery solutions I can recall, but it should take just a few lines of code to implement, and trigger a custom-named jQuery event.

Update. I sketched a simple demo below. Div is bouncing left to right inside a box that tracks the mouse position. Only horizontal position is checked for collision in the example. Move mouse pointer somewhere on the way of the bouncing square, and leave it motionless. The square turns red when collision is in effect, and back to grey when its out..

Caveats. There is no way in JS to get mouse position without moving the mouse - then it emits an event with coordinates. So detection won't happen until mouse is moved at least once after page is loaded.

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>

链接地址: http://www.djcxy.com/p/32186.html

上一篇: 如果突出显示一个单词并且用户单击连接单词，则突出显示这两个单词

下一篇: 有没有一种补充的方式来获得像鼠标事件？