Question

直接使用jQuery：

如果我有一个固定的盒子（比如一个彩色的矩形），我将鼠标移入或移出它，如果我将鼠标光标移动到盒子的边界上，jQuery会给我一些事件。

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

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

Answer 1

尝试创建全局变量以存储当前pageX，pageY;使用附加到mousemove的{{1}}事件设置全局变量;使用window选项的step属性来计算动画元素的当前位置，引用.animate()，offsetLeft，offsetTop;检查当前鼠标相对于偏移量，元素底部的位置。

还可以通过在getBoundingClientRect().bottom事件处理程序

中执行相同检查来补充过程

＆＃13;

mousemove

＆＃13;

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)
    }
  })

＆＃13;

div {
  width: 100px;
  height: 100px;
  background: olive;
  position: relative;
}

＆＃13;

Answer 2

如果您使用您可以使用此代码段获取鼠标坐标：

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

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

Answer 3

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

我记不起现成的jQuery解决方案，但它应该只需要几行代码来实现，而trigger是一个自定义命名的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>

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

3 个答案: