Question

此代码适用于onmousemove和onmouseover，但不适用于onmouseenter。

如果我将指针移到第二个div上，它将保持“第二个”。为什么？

我不明白。

var movecounter = 0;
var entercounter = 0;
var overcounter = 0;
onmousemove = myFunction1;
onmouseenter = myFunction2;
onmouseover = myFunction3;

function myFunction1() {
  movecounter++;
  document.getElementById("first").innerHTML = "MouseMove: " + movecounter;
}

function myFunction2() {
  entercounter++;
  document.getElementById("second").innerHTML = "MouseEnter: " + entercounter;
}

function myFunction3() {
  overcounter++;
  document.getElementById("third").innerHTML = "MouseOver: " + overcounter;
}

<!DOCTYPE html>
<html>

<body>

  <div id="first">first</div>

  <br>

  <div id="second">second</div>

  <br>

  <div id="third">third</div>

</body>

</html>

Answer 1

嗨，欢迎来到StackOverflow。

您使用的onmouseenter是全局Window本身的事件，可能无法正常工作。有关Window的所有可用事件处理程序，请参见https://developer.mozilla.org/en-US/docs/Web/API/Window#Event_handlers。并非所有事件处理程序都支持GlobalEventHandlers定义的所有可能的事件。

最简单的解决方法是将事件绑定到您要监听的元素（例如document或body元素）。

通常：

mousemove：将在指针移动到事件绑定的元素内部时立即触发。
mouseover：一旦移至绑定了事件的元素或任何其他子元素，就会被触发。对于每个“更改”，都会发出一个新事件。
mouseenter：一旦指针进入事件绑定到的元素，就会被触发。仅当指针事先离开该元素时，它才会再次触发。

var movecounter = 0;
var entercounter = 0;
var overcounter = 0;
document.body.onmousemove = myFunction1;
document.body.onmouseenter = myFunction2;
document.body.onmouseover = myFunction3;

function myFunction1(){
  movecounter++;
  document.getElementById("first").innerHTML = "MouseMove: " + movecounter;
}

function myFunction2(){
  entercounter++;
  document.getElementById("second").innerHTML = "MouseEnter: " + entercounter;
}

function myFunction3(){
  overcounter++;
  document.getElementById("third").innerHTML = "MouseOver: " + overcounter;
}

<html>
  <body>
    <div id="first">first</div>

    <br>

    <div id="second">second</div>

    <br>

    <div id="third">third</div>
  </body>
</html>

Onmousemove，onmouseover和onmouseenter。为什么不起作用？

1 个答案: