Question

我需要检测用户是否悬停在元素上，这很简单。然而，当元素动画时，这些事件似乎不会发生。如果你看看我的小提琴，只需要在不移动鼠标的情况下让元素通过鼠标动画，你就会发现事件不会发生。这是有道理的，为什么会发生这种情况，但我还没有找到一个好方法来获得我想要的行为，这就是即使用户没有移动他/她的鼠标也能检测到悬停元素在它下面动画。

有什么想法吗？

谢谢！

注意：不使用外部库的解决方案是最佳的，但仍然可以获得任何帮助：）

HTML

<div id='moving'></div>
<ul id="message"></ul>

CSS

#moving {
  width: 50px;
  height: 50px;
  background-color: red;
  animation: move 7s linear;
}

@keyframes move {
    from {transform: translateX(0px)}
    to {transform: translateX(500px)}
}

JS

var counter = 0;

document.getElementById("moving").addEventListener("mouseover", function(){
    counter++;
    var node = document.createElement("LI");
    var textnode = document.createTextNode("Entered " + counter);
    node.appendChild(textnode);
    document.getElementById("message").appendChild(node);
});

document.getElementById("moving").addEventListener("mouseout", function(){
    var node = document.createElement("LI");
    var textnode = document.createTextNode("Left " + counter);
    node.appendChild(textnode);
    document.getElementById("message").appendChild(node);
});

这里有一个小提琴： https://jsfiddle.net/w5j842Lx/

Answer 1

您可以检查鼠标是否在一个间隔内进出。这是从你的小提琴延伸出来的working fiddle。

＆＃13;

// This is the helper method I have written
var addMoveListener = function(element, onmouseover, onmouseout) {
  var over = false;
  var mouseX, mouseY;
  var checkOver = function(ev) {
    if (ev) {
      mouseX = ev.clientX;
      mouseY = ev.clientY;
    }
    if (mouseX == null || mouseY == null) return;

    var rect = element.getBoundingClientRect();
    var isInside = mouseX >= rect.left && mouseX < rect.right && mouseY >= rect.top && mouseY < rect.bottom;
    if (over && !isInside && onmouseout) onmouseout();
    if (!over && isInside && onmouseover) onmouseover();
    over = isInside;
  }

  document.addEventListener("mousemove", checkOver);
  var interval = setInterval(checkOver.bind(null, null), 100);
}

// Code below is for the sake of demonstration
var counter = 0;

var mouseovercallback = function() {
  counter++;
  console.log("Entered " + counter);
};

var mouseoutcallback = function() {
  console.log("Left " + counter);
};

addMoveListener(document.getElementById("moving"), mouseovercallback, mouseoutcallback);

＆＃13;

#moving {
  width: 50px;
  height: 50px;
  background-color: red;
  animation: move 7s linear;
}

@keyframes move {
  from {
    transform: translateX(0px)
  }
  to {
    transform: translateX(500px)
  }
}

＆＃13;

<div id='moving'></div>

＆＃13;

代码检查鼠标是否每100毫秒包含一次，以及鼠标是否被移动。如果要处理元素不是矩形或旋转，倾斜等情况，则必须改进代码。

Answer 2

看看这个jsfiddle https://jsfiddle.net/3vpaoj59/ 它包括一个像这样的函数

  setInterval(checkMouse, 100);

基本上每秒调用一次函数10次，以检查鼠标的坐标是否在动画形状内。你的形状是正方形而不是圆形，所以你必须做一些不同的数学运算。这段代码很好，因为它不使用插件，但它可能是CPU密集型的，在某些情况下性能可能不佳。

Mouseover和mouseout未使用动画元素

2 个答案: