Question

我目前有一个div，其中包含其他元素。

类似于下面的内容;

<div id="container" style="position: relative; width: 500px; height: 500px;">
     <div style="position: absolute; left: 50px; top: 50px;"></div>
     <div style="position: absolute; left: 100px; top: 100px;"></div>
</div>

我试图获取相对于ID为container的div的鼠标位置。

到目前为止，我有这个;

function onMousemove(event) {

    x = event.offsetX;
    y = event.offsetY;
};

var elem = document.getElementById("container");
elem.addEventListener("mousemove", onMousemove, false);

如果ID为container的div没有子节点，则此方法可以正常工作。当container div有子节点时，它会获得相对于孩子而不是父节点的鼠标坐标。

我的意思是，如果鼠标位于相对于父div的x: 51, y: 51位置，它实际上将使用上面给出的html相对于子div返回x: 1, y: 1。 / p>

我如何实现我想要的，请不要图书馆。

修改

很明显，tymeJV已经对上面发生的事情做了一个小问题。

http://jsfiddle.net/N6PJu/1

Answer 1

接受的答案在Chrome中对我不起作用。这就是我解决它的方法：

function relativeCoords ( event ) {
  var bounds = event.target.getBoundingClientRect();
  var x = event.clientX - bounds.left;
  var y = event.clientY - bounds.top;
  return {x: x, y: y};
}

Answer 2

实质上：'mouseposition' - '父元素位置'='相对于父元素的鼠标位置'

所以我在这里修改了你的功能：

function onMousemove(e){
    var m_posx = 0, m_posy = 0, e_posx = 0, e_posy = 0,
           obj = this;
    //get mouse position on document crossbrowser
    if (!e){e = window.event;}
    if (e.pageX || e.pageY){
        m_posx = e.pageX;
        m_posy = e.pageY;
    } else if (e.clientX || e.clientY){
        m_posx = e.clientX + document.body.scrollLeft
                 + document.documentElement.scrollLeft;
        m_posy = e.clientY + document.body.scrollTop
                 + document.documentElement.scrollTop;
    }
    //get parent element position in document
    if (obj.offsetParent){
        do { 
            e_posx += obj.offsetLeft;
            e_posy += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    // mouse position minus elm position is mouseposition relative to element:
    dbg.innerHTML = ' X Position: ' + (m_posx-e_posx) 
                  + ' Y Position: ' + (m_posy-e_posy);
}

var elem = document.getElementById('container');
elem.addEventListener('mousemove', onMousemove, false);

var dbg=document.getElementById('dbg');  //debut output div instead of console

这是working demo fiddle。正如您可以在代码中阅读的那样，这也会查看文档的滚动位置。

PPK关于“event properties”和“find position”的文章（一如既往）是一本很好的读物！

希望这有帮助！

<强>更新
我实际上在ppk的代码中发现了一个错误（这有多少？？）：我纠正了错误的var：
if (!e) var e = window.event;至if (!e){e = window.event;}

Answer 3

获取screenX和screenY属性以查看鼠标在屏幕上的位置（并可能考虑到scrollHeight！）。

然后获取容器元素的左侧和顶部并计算它们之间的偏移量：即鼠标在元素中的位置。

有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/DOM/MouseEvent。

Answer 4

HTML 的

<div id="container" style="position: relative; width: 500px; height: 500px;">
<div style="position: absolute; left: 50px; top: 50px;"></div>
<div style="position: absolute; left: 100px; top: 100px;"></div>
</div>

的Javascript

function onMousemove(event) {
    x = event.layerX; // position x relative to div
    y = event.layerY; // position y relative to div 
};

var elem = document.getElementById("container");
elem.addEventListener("mousemove", onMousemove, false);

Answer 5

使用功能组件，您可以将 useRef 与 click 事件侦听器结合使用（而不是需要直接引用 DOM）：

const MyElement = () => {
  const ref = useRef(null);

  useEffect(() => {
    const currentRef = ref.current;
    if (currentRef) {
      const clickListener = (e) => {
        const rightOfElement = currentRef.getBoundingClientRect().right;
        const leftOfElement = currentRef.getBoundingClientRect().left;
        const mousePositionRelativeToElement = e?.clientX ?? 0;

        const mousePos = rightOfElement - mousePositionRelativeToElement;
        const fullWidth = rightOfElement - leftOfElement;

        // do something, e.g. changing state based on position
        if (mousePos / fullWidth < 0.5) {
          setTheme(2);
        } else {
          setTheme(1);
        }
      };
      currentRef.addEventListener("click", clickListener);
      return () => {
        currentRef.removeEventListener("click", clickListener);
      };
    }
  }, [setTheme]);

  return (
    <div className="theme-selector-wrapper">
      <div className="theme-selector" ref={ref}></div>
    </div>
  );
};

在 useEffect 内（即元素加载后），向分配给 ref 元素的元素添加一个事件侦听器，该元素侦听点击。在此示例中，我根据 X 位置与元素宽度的比率更改了“主题”。

如何获得相对于父div的鼠标坐标？使用Javascript

5 个答案: