jquery mouseenter on child div with bigger dimensions than parent div

3
votes

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.

3
javascriptjqueryhtmlcssjquery-events
triggers? triggers what? please improve the title – vsync
Possible duplicate of Event propagation in Javascript – n00dl3
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
@vsync you were right my title was wrong. I changed it. – tioschi

3 Answers

6
votes

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();
});
1
votes

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

-1
votes

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