Preserve mouse offset to parent when clicking

user_12454031 0
Viewed 135

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>

offset click events jquery javascript
3 Answers

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>

user_21815140

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>

user_152103350
Solution

Add a transparent background and full height and width child div to the parent (#parent-overlay) and check for its offset instead.

Why

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>

user_136442990
Related