I have a problem with the onmouseover() event listener.

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

I trigger a javascript function whenever the mouse is hovering over the parrent, but whenever I'm hovering over the child, it doesn't register the onmouseover anymore.

Is there a workaround so the onmouseover() also gets triggered while hovering over its child elements, using pure Javascript?

I have a problem with the onmouseover() event listener.

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

I trigger a javascript function whenever the mouse is hovering over the parrent, but whenever I'm hovering over the child, it doesn't register the onmouseover anymore.

Is there a workaround so the onmouseover() also gets triggered while hovering over its child elements, using pure Javascript?

• javascript
• dom-events
• onmouseover

• 1 It would be good to understand what event delegation is – aug Commented Apr 12, 2017 at 21:33
• Use a delegated event, ie on the parent listen for events bubbling up, then get the event target. Don'r know how to do that in vanilla js. Or maybe mouseenter event may suit your needs? – yezzz Commented Apr 12, 2017 at 21:34
• Please provide a fiddle that illustrates the issue. I cannot reproduce this problem: the mouseover event triggers both for the child as the parent element. – trincot Commented Apr 12, 2017 at 21:39
• Does your myfunction return true or false? – Pavel P Commented Apr 12, 2017 at 22:10

1 Answer 1

Use mouseenter event instead, which doesn't bubble with children elements like mouseoverdoes.

In other words with mouseover the event will be attached to all the element children too, so when you hover a child the event will be fired as if we left the parent div.

Demo:

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>

You can see in the above snippet that using mouseenter the event is always firing even if we hover over children and only the parent id is logged, as if we didn't leave it.

Mouseover demo:

You can see the difference here using mouseover event:

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>