鼠标悬停和鼠标悬停不使用动画元素触发答案

【问题标题】：Mouseover and mouseout not firing with animating element鼠标悬停和鼠标悬停不使用动画元素触发
【发布时间】：2016-10-29 21:45:25
【问题描述】：

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

有什么想法吗？

谢谢！

注意：不使用外部库的解决方案是最佳的，但仍然感谢任何帮助:)

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

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/

【问题讨论】：

这会有帮助吗？ stackoverflow.com/questions/36380040/…
@natel 这种逻辑对于它正在做的事情来说非常昂贵。
是的，我希望有更好的解决方案，但我不知道。

标签： javascript html css animation mouseover

【解决方案1】：

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

// 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);

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

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

&lt;div id='moving'&gt;&lt;/div&gt;

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

【讨论】：

【解决方案2】：

看看这个 jsfiddle https://jsfiddle.net/3vpaoj59/ 它包括这样的功能

  setInterval(checkMouse, 100);

基本上每秒调用一个函数 10 次来检查鼠标的坐标是否在动画形状内。你的形状是正方形而不是圆形，所以你必须做一些不同的数学。这段代码不错，因为它不使用插件，但它可能会占用大量 CPU，并且在某些情况下性能可能会很差。

【讨论】：