Question

我遇到onmouseover()事件监听器的问题。

<div class="parent" onmouseover="myfunction()">
   <div class="child"></div>
</div>

只要鼠标悬停在parrent上，我就会触发javascript函数，但每当我将鼠标悬停在child上时，它都不会再注册onmouseover。是否有解决方法，以便在使用纯javascript将鼠标悬停在其onmouseover()元素上时触发child？

Answer 1

请使用mouseenter event，而不会像mouseover这样的子元素冒泡。

换句话说，mouseover事件也将附加到所有元素children，因此当您悬停孩子时，事件将被触发，就像我们离开一样父级 div。

<强>演示：

document.getElementById("test").addEventListener("mouseenter", function(event) {
  var target = event.target;
  console.log(target.id);
}, false);

.child {
  min-width: 50px;
  min-height: 50px;
  padding: 10px;
  display: inline-block;
  background-color: yellow;
}

.parent {
  padding: 20px;
  background-color: red;
}

<div id="test" class="parent">
  <div id="child1" class="child">1</div>
  <div id="child2" class="child">2</div>
  <div id="child3" class="child">3</div>
  <div id="child4" class="child">4</div>
  <div id="child4" class="child">5</div>
</div>

您可以在上面的代码段中看到，使用mouseenter即使我们将鼠标悬停在子级上并且只记录了父级id，该事件也始终会触发，就好像我们没有离开它一样。 / p>

鼠标悬停演示：

您可以使用mouseover事件来查看差异：

document.querySelector(".parent").addEventListener("mouseover", function(event){
  console.log(event.target.id);
});

.child {
  min-width: 50px;
  min-height: 50px;
  padding: 10px;
  display: inline-block;
  background-color: yellow;
}

.parent {
  padding: 20px;
  background-color: red;
}

<div class="parent">
  <div id="child1" class="child">1</div>
  <div id="child2" class="child">2</div>
  <div id="child3" class="child">3</div>
  <div id="child4" class="child">4</div>
  <div id="child4" class="child">5</div>
</div>

onmouseover eventlistener所有孩子

1 个答案: