jquery mouseenter on child div with bigger dimensions than parent div

Question

I have a parent div with height=100px which is smaller than child div which has height=200px.

When I attach jquery mouseenter on parent div then the event triggers even if I hover the pointer over child ( hover over the portion of child which extends the height of parent ).

Can anyone explain this?

$(document).ready(function() {
  $(".parent").mouseover(function(e) {
   console.log(e.target);
  });
  $(".child").mouseover(function(e) {
   console.log(e.target);
  });
  $(".grandchild").mouseover(function(e) {
   console.log(e.target);
  });
 });

.parent {
   background-color: green;
   height: 50px;
  }
  .child {
   background-color: red;
   height: 100px;
  }
  .grandchild {
   background-color: blue;
   height: 200px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">
   <div class="grandchild">
    Test
   </div>
  </div>
 </div>

--UPDATE-- At first it unclear to me what was exactly the problem. Now I think I understand (I updated the code).

Say we have a parent div with width=100px and height=100px.
Then we have a child div with width=200px and height=200px (bigger area than parent).
When I hover the mouse over the child (but not over the parent yet) the browser calculates that the pointer is over the parent too, although it does not.
So if I have a handler both on child and on parent, they will fire both by the time I enter the child div only.

Thank you.

Possible duplicate of [Event propagation in Javascript](http://stackoverflow.com/questions/1522941/event-propagation-in-javascript) — n00dl3, Mar 29 '17 at 12:36
I think you should better explain on what you want to understand. Are you asking why the event fires when you hover over the child or are you wishing the event to fire only when the mouse is over the parent and not the child? — Sagar, Mar 29 '17 at 13:04

Konstantin Dinev · Accepted Answer · 2017-03-29T12:57:06.313

6

You can prevent the event from propagating from the child to the parent, so it doesn't trigger on the parent when you're over the child:

$(".child").mouseover(function(e) {
    e.stopPropagation();
});

edited Mar 29 '17 at 12:57

answered Mar 29 '17 at 12:35

Konstantin Dinev

34,219
14
75
100

Yes that is correct. But although I added it still triggers. – tioschi Mar 29 '17 at 12:54
1

I think it does because you're subscribed to mouseenter, instead of mouseover. Mouseenter will fire only ones, but then mouseover will continue firing on mousemove. I suggest switching to mouseover and mouseout. – Konstantin Dinev Mar 29 '17 at 12:56
your answer and comment are correct but please read the update on my question in case you something more to comment. – tioschi Mar 30 '17 at 08:17
1

@tioschi Since both elements are static, the outer (parent) element grows with the dimensions of the inner (child) element. The only way to have the child larger than the parent is to have both of them absolutely positioned. However, this will probably completely break your layout! – Konstantin Dinev Mar 30 '17 at 12:01
But in this case the divs have position relative. And if you look at the CSS I have manually set the height of the last child bigger than the others. For example if I were to insert a new div as a sibling of parent div, then the grandchild would overlap the new div. – tioschi Mar 30 '17 at 17:07
1

@KonstantinDinev Yes, mouseenter & mouseout prevents this behaviour, although the wrong trigger is fired for a few millis. anyway, your tipp worked for me, kudos to you – clockw0rk Sep 13 '18 at 12:15

score 1 · Answer 2 · answered Mar 29 '17 at 13:40

try this:

    $(".child").mouseover(function(e) {
    e.stopImmediatePropagation();
    console.log(e.isPropagationStopped());
    console.log(e.currentTarget);
});

e.isPropagationStopped() tells you if the method e.stopImmediatePropagation(); is called. I tried and this works for me. And you have to select child instead of parent

xeno · Answer 3 · 2017-03-29T15:02:25.553

-1

use this in your css. It removes all mouse events on the child element. (Also isnt hover-able...)

.child{pointer-events: none}

"pointer-events: none":

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

source: https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

edited Mar 29 '17 at 15:02

answered Mar 29 '17 at 13:03

xeno

44
5

Please use the [edit] link to explain how this code works and don't just give the code, as an explanation is more likely to help future readers. See also [answer]. [source](http://stackoverflow.com/users/5244995) – Jed Fox Mar 29 '17 at 14:26
@xeno Although pointer-events it is not very helpful for my purposes right now it is a helpful info that I will study and may adopt in the future. Did not know the existence of this. – tioschi Mar 30 '17 at 07:34

jquery mouseenter on child div with bigger dimensions than parent div

3 Answers3