I'm trying to get the mouse offset inside a square, but when I click on its children, the offset changes, now returning the mouse offset inside the children, and not the parent.
What I would like to achieve is to get the mouse offset inside the parent, even if I click inside the children. Thanks a lot!
Below is an example of the problem. (Look in the console)
$("#parent").click(function(e){
console.log(e.offsetX, e.offsetY)
});.square{
position: relative;
height: 200px;
width: 200px;
background-color: red;
}
.small{
position: absolute;
top: 25px;
right: 25px;
height: 50px;
width: 50px;
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="square" id="parent">
<div class="square small"></div>
</div>You can use
e.target
to get the element clicked, as this is the parent element that the click has bubbled up to.
Then combine with .getBoundingClientRect() to get its position, gives:
$("#parent").click(function(e) {
var rect = e.target.getBoundingClientRect();
//console.log(e.offsetX, e.offsetY)
//console.log(rect.left, rect.top)
console.log(rect.left + e.offsetX, rect.top + e.offsetY)
});.square {
position: relative;
height: 200px;
width: 200px;
background-color: red;
}
.small {
position: absolute;
top: 25px;
right: 25px;
height: 50px;
width: 50px;
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="square" id="parent">
<div class="square small"></div>
</div>Adding pointer-events: none; to the css for the class "small" disables clicking on the element.
$("#parent").click(function(e){
console.log(e.offsetX, e.offsetY)
});.square{
position: relative;
height: 200px;
width: 200px;
background-color: red;
}
.small{
position: absolute;
top: 25px;
right: 25px;
height: 50px;
width: 50px;
background-color: blue;
pointer-events: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="square" id="parent">
<div class="square small"></div>
</div>Add a transparent background and full height and width child div to the parent (#parent-overlay) and check for its offset instead.
The offsets are gotten from the click event and the click event was on the child. So while in the child, you can't get an offset from the parent (the event was registered on the child).
Adding a full width and height overlay, that matches the parent, and getting offset from there should give you what you want.
$("#parent-overlay").click(function(e) {
console.log(e.offsetX, e.offsetY);
});.square{
position: relative;
height: 200px;
width: 200px;
background-color: red;
}
.small{
position: absolute;
top: 25px;
right: 25px;
height: 50px;
width: 50px;
background-color: blue;
z-index: 1;
}
#parent-overlay {
position: absolute;
z-index: 3;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: transparent;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="square" id="parent">
<div id="parent-overlay"></div>
<div class="square small"></div>
</div>