CODEWITHSUNDEEP
javascripteventsdom-events
Nimelrian
Nimelrian

Reputation: 1706

MouseEvent.offsetX/Y resets to 0 if moving over different child elements

Take the following fiddle.

It contains a parent div with 3 child divs. A click-listener is attached to the parent div and should throw alerts with the mouse position relative to the parent div:

const parent = document.getElementById('main');
parent.addEventListener('click', handleMouseClick);

function handleMouseClick(e) {
    alert(e.offsetX, e.offsetY);
}

What I expect: Click on any of the child divs and get the click position relative to the parent div (#main).

What actually happens: OffsetX/Y always equals the click position relative to the child I clicked on.

Why does this happen? How can I fix it? Is there another way to get the mouse position relative to the parent div, taking potential scrolling into account?

Upvotes: 4

Views: 2408

Answers (3)

wintr
wintr

Reputation: 63

you can add a css attribute to child element 

.child {
  pointer-events: none;
}

take the following codepen

Upvotes: 1

Tais Daniele
Tais Daniele

Reputation: 1

SensorGoldenCalTable:{   // SensorGoldenCalTable
       PixId:    3,
       SlimLscType:    0,
       Width:    0,
       Height:    0,
       OffsetX:    0,
       OffsetY:    0,
       TblSize:    0,
       IspLSCReg:    {0, 0xd048d035, 0, 0x00480041, 0},
       GainTable:    {

            0x99, 0x6d, 0x94, 0x63, 0xa1, 0x62, 0x8b, 0x5f, 0x1a, 0x5d, 0xb2, 0x54, 0xf2, 0x53, 0xba, 0x51, 
            0x0c, 0x4f, 0x59, 0x48, 0x73, 0x47, 0xba, 0x45, 0xa7, 0x45, 0xee, 0x3f, 0xec, 0x3e, 0x7a, 0x3d, 
            0xcb, 0x3e, 0x03, 0x3a, 0x04, 0x39, 0xd4, 0x37, 0x23, 0x3a, 0xf5, 0x35, 0x09, 0x35, 0x0c, 0x34, 
            0x69, 0x37, 0xac, 0x33, 0xc0, 0x32, 0xde, 0x31, 0x8d, 0x36, 0x0b, 0x33, 0x10, 0x32, 0x5a, 0x31, 
            0x85, 0x37, 0xc4, 0x33, 0xd1, 0x32, 0x24, 0x32, 0x2a, 0x3a, 0xfa, 0x35, 0x0f, 0x35, 0x30, 0x34, 
            0x02, 0x3f, 0xce, 0x39, 0xe8, 0x38, 0x93, 0x37, 0xb8, 0x45, 0xfd, 0x3f, 0x3e, 0x3f, 0x98, 0x3d, 
            0x25, 0x50, 0xd6, 0x48, 0x16, 0x48, 0x4a, 0x46, 0x17, 0x5e, 0x7f, 0x55, 0xd1, 0x54, 0x48, 0x52,

Upvotes: -2

jconra
jconra

Reputation: 84

You can get what you want like this:

function handleMouseClick(e) {
  child = e.target.getBoundingClientRect();
    alert(e.offsetX+child.left, e.offsetY+child.top);
}

The event is triggered for the child because it is on top. So you can grab the child's getBoundingClientRect() and you can access it's left and top fields to determine where it is in relation to its parent. I hope that helps!

Edit: If the parent of the event.target is not positioned at (0:0) then you will also have to involve the offset of the parent (and possibly the parent's parent and so on) in order to get the position of the mouse click. You can traverse the parents of DOM objects by calling on the parentElement field (e.target.parentElement).

for example:

function handleMouseClick(e) {
  childBounds = e.target.getBoundingClientRect();
  parentBounds = e.target.parentElement.getBoundingClientRect();
   alert((e.offsetX+childBounds.left-parentBounds.left) + ", "+ (e.offsetY+childBounds.top-parentBounds.top));
}

Upvotes: 3

Related Questions