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?

回答1:

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));
}

回答2:

you can add a css attribute to child element

.child {
  pointer-events: none;
}

take the following codepen

回答3:

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,

来源：https://stackoverflow.com/questions/39568498/mouseevent-offsetx-y-resets-to-0-if-moving-over-different-child-elements

标签

javascript

events

dom-events