jQuery：检查鼠标是否在动画上？ [英] jQuery: Check if mouse is over an animation?

问题描述

这几乎是我正在处理的内容： https://jsfiddle.net/atg5m6ym/2625/

我使用jQuery为div创建动画，向左移动，然后在鼠标悬停在div上并且将鼠标移开时登录到控制台它：

  $（div）。animate（{left：'250px'}，6000）; 
 $ b $（'div'）。hover（function（）{
 console.log（Mouse hovered on div！）; 
}）。mouseleave（function（） {
 console.log（Mouse left div！）; 
}）
  

<当然，程序会运行 console.log（Mouse hovered on div！）; 一旦我将鼠标放在元素上。

但是，如果我将鼠标闲置并将动画元素移动到它上面，那么 $（'div'）。hover（function（）{}）会运行。我必须将鼠标移动到代码运行的元素上，而不是让元素进入鼠标。

如果我将鼠标悬停在元素上，也会发生同样的情况，然后让我的鼠标闲置。 $（'div'）。mouseleave（function（）{}）中的任何内容都会在元素离开后运行，直到我将鼠标从它的位置移开。

有什么办法可以解决这个问题吗？我正在使用动画divs，即使鼠标闲置并且divs通过它，我也需要运行代码。 解决方案

手动拿起鼠标的最后已知位置，并将其与圆圈的位置进行比较。这是一种广泛的，但它应该给你正确的结果。

这是一个JSFiddle：
https://jsfiddle.net/3vpaoj59/

  $（ div）。animate（{left：'250px'}，6000）; 
 
 $（document）.ready（function（）{
 //记录下游标的位置
 var cursorX; 
 var cursorY; 
 document.onmousemove = function（e）{
 cursorX = e.pageX; 
 cursorY = e.pageY; 
} 
 //布尔型知道是否悬停，以及知道是否要在console.log中报告
 var hover = false; 
 //函数由setinterval调用以检查鼠标是否在半径范围内
函数checkMouse（）{
 //找到圆的中心点，然后将其宽度/高度的一半添加到每个坐标
 var left = $（＃foo）。offset（）。left + $（＃foo）。width（ ）/ 2; 
 var top = $（＃foo）。offset（）。top + $（＃foo）。height（）/ 2; 
 //使用毕达哥拉斯定理找出距离两个点之间
 var xdist = Math.pow（Math.abs（cursorX  -  left），2）; 
 var ydist = Math.pow（Math.abs（cursorY  -  top），2）; 
 var hypotenuse = Math.round（Math.sqrt（xdist + ydist））; 
 //检查距离i如果（斜边< = $（＃foo）.width（）/ 2&& ！hover）{
 //如果为true并且尚未报告为真，则报告并修正
 console.log（鼠标悬停在div上！）; 
 hover = true; 
} else if（斜边> $（＃foo）.width（）/ 2& h; hover）{
 //如果为false并且尚未报告false，则报告然后修正
 console.log（mouse left div！）; 
 hover = false; 
} 
} 
 //重复调用这个
 setInterval（checkMouse，100）; 
}）; 
  

为方便起见，我将div的ID更改为foo。请务必这样做，以便代码可以用于您的项目，或者修改JS以不使用foo。

解释：

发生问题的原因是因为只有在每次移动光标时才更新鼠标的坐标，这时悬停状态通过<$ c $检查C> .hover 。因此，我们需要模拟确定悬停的事件并重复调用它，即使游标未移动以确保悬停状态已更新。

This is pretty much what I'm working on: https://jsfiddle.net/atg5m6ym/2625/

I'm animating a div with jQuery to move left, then logging to the console when I hover over the div and when I move my mouse away from it:

$("div").animate({left: '250px'}, 6000);

$('div').hover(function() {
    console.log("Mouse hovered on div!");
}).mouseleave(function() {
        console.log("Mouse left div!");
})

Naturally, the program will run console.log("Mouse hovered on div!"); once I put my mouse on the element.

However, if I leave my mouse idle and the animated element moves onto it, nothing in $('div').hover(function(){}) will run. I have to move my mouse onto the element for the code to run, not let the element come to the mouse.

The same thing also happens if I hover onto the element, and then leave my mouse idle. Nothing in $('div').mouseleave(function(){}) will run after the element leaves, until I move my mouse from its position.

Is there any way to work around this? I am working with animated divs and I need code to run even if the mouse is idle and the divs pass through it.

解决方案

Manually take the mouse's last known position and compare it to the position of the circle. This is kind of extensive but it should get you the right results.

Here is a JSFiddle: https://jsfiddle.net/3vpaoj59/

$("div").animate({left: '250px'}, 6000);

$(document).ready(function() {
  // record down the position of the cursor
  var cursorX;
  var cursorY;
  document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
  }
  // boolean to know if hovered or not, and to know whether to report in console.log
  var hover = false;
  // function to call by setinterval to check if mouse is within radius
  function checkMouse(){
    // find the centerpoint of the circle by taking its position then adding half its width/height to each coordinate
    var left = $("#foo").offset().left+$("#foo").width()/2;
    var top = $("#foo").offset().top+$("#foo").height()/2;
    // use pythagorean theorem to find distance between two points
    var xdist = Math.pow(Math.abs(cursorX - left),2);
    var ydist = Math.pow(Math.abs(cursorY - top),2);
    var hypotenuse = Math.round(Math.sqrt(xdist+ydist));
    // check if the distance is less than radius
    if(hypotenuse <= $("#foo").width()/2 && !hover){
      // if true and not already reported true, report then fix
      console.log("mouse hovered on div!");
      hover = true;
    } else if (hypotenuse > $("#foo").width()/2 && hover){
      // if false and not already reported false, report then fix
      console.log("mouse left div!");
      hover = false;
    }
  }
  // repeatedly call this
  setInterval(checkMouse, 100);
});

I changed the div's ID to "foo" for convenience. Make sure to do this as well so that the code works for your project, or modify the JS to not use "foo".

Explanation:

The reason why your problem was occurring was because your mouse's coords are only updated every time you move your cursor, and that's when hover states are checked by .hover. As such, we need to emulate the event that determines hover and call it repeatedly even when the cursor hasn't moved to make sure the hover state is updated.

这篇关于jQuery：检查鼠标是否在动画上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！