Preserve mouse offset to parent when clicking-CodePudding

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  id="parent">
  <div ></div>
</div>

CodePudding user response：

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  id="parent">
  <div ></div>
</div>

CodePudding user response：

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  id="parent">
  <div ></div>
</div>

CodePudding user response：

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  id="parent">
  <div id="parent-overlay"></div>
  <div ></div>
</div>