CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-events
tioschi
tioschi

Reputation: 387

jquery mouseenter on child div with bigger dimensions than parent div

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.

Upvotes: 3

Views: 1072

Answers (3)

xeno
xeno

Reputation: 42

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

Upvotes: -1

FFdeveloper
FFdeveloper

Reputation: 241

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

Upvotes: 1

Konstantin Dinev
Konstantin Dinev

Reputation: 34905

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

Upvotes: 6

Related Questions