Gabriel F. answered • 10/28/19
Tutor
5.0
(85)
Full Stack Software Developer and Mentor
Hi there. I am not sure I understand what you are trying to do but if you want the mouse event to "ignore" an element (child) that sits on top of another element (parent) you could use this css rule .child {pointer-events: none;} so that the child element doesn't register pointer events.
Code without the pointers events rule:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.parent, .child {
width: 200px;
height: 200px;
color: white;
}
.parent {
position: relative;
background: blue;
}
.child {
position: absolute;
top: 0;
background: red;
opacity: .5;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<script>
document.querySelector('.parent')
.addEventListener('click', e => {
console.log('target element: ', e.target);
// logs target element: <div class="child">...</div>
});
</script>
</body>
</html>
Add the pointer events rule to the child class to ignore pointer events on that element:
.child {
position: absolute;
top: 0;
background: red;
opacity: .5;
pointer-events: none; /*this*/
}
/* now the browser should log "target element: <div class="parent">...</div>"*/
I hope this helps.
