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