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

直接使用jQuery：

如果我有一个静止的盒子（比如说一个彩色的矩形），并且我将鼠标移入或移出它，如果我将鼠标光标移动到盒子的边界上，jQuery将为我提供事件。

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

在对象移动和鼠标光标静止时，有什么方法可以接收语义上与“静止对象，移动鼠标光标”类似的东西？

---

尝试创建全局变量来存储当前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>

---

如果你使用你可以拿这个片段的鼠标坐标：

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

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

---

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

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

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

上一篇: Is there a complementary way to get something like mouse events?

下一篇: Adding Colorbar to a Spectrogram