Div 在悬停时没有得到准确的位置答案

【问题标题】：Div not getting exact position onhoverDiv 在悬停时没有得到准确的位置
【发布时间】：2022-01-05 06:33:08
【问题描述】：

我有一个div，我希望它显示在与iframe 内悬停元素完全相同的位置。它得到正确的高度和宽度，但不是顶部和左侧。我究竟做错了什么？ 如何让它得到正确的元素位置？

代码如下：

<html>
  <body>
    <div>
      <div id="box"></div>
      <p id="a">You clicked on:</p>
      <iframe
        id="zzz"
        srcdoc="<html><h1>hello</h1><button> click </button></html>"
        width="500"
        height="500"
      ></iframe>
    </div>

    <script>
      let elem = "";
      let myiframe = document.getElementById("zzz").contentWindow;
      let div = document.getElementById("box");

      myiframe.addEventListener("mouseover", function (e) {
        elem = e.target;
        var rect = elem.getBoundingClientRect();
        x = rect.left;
        y = rect.top;
        w = rect.width;
        h = rect.height;
        document.getElementById("a").innerHTML =
          elem.tagName + " width: " + w + " height: " + h;

        div.style.display = "block";
        div.style.position = "absolute";
        div.style.width = w;
        div.style.height = h;
        div.style.left = x;
        div.style.top = y;
      });

    </script>
    <style>
      #box {
        border: blue 1px solid;
        height: 25px;
        width: 50px;
        display: none;
      }
    </style>
  </body>
</html>

【问题讨论】：

标签： javascript html mouseover getboundingclientrect

【解决方案1】：

这是因为div 相对于页面的左上角放置，而不是iframe 的左上角。您可以将iframe 的 X 和 Y 坐标添加到您从getBoundingClientRect() 获得的坐标中。

例如：

let elem = ""; 
let myiframe = document.getElementById("zzz").contentWindow; 
let div = document.getElementById("box"); myiframe.addEventListener("mouseover", function (e) { 
    elem = e.target; 
    var rect = elem.getBoundingClientRect(); 
    x = rect.left; 
    y = rect.top; 
    w = rect.width / 2; // It was a little bit hard to hover over anything because the div was blocking it, so I halved width and height.
    h = rect.height / 2;
    document.getElementById("a").innerHTML = elem.tagName + " width: " + w + " height: " + h; 
    div.style.display = "block"; 
    div.style.position = "absolute"; 
    var a = document.getElementById("zzz").getBoundingClientRect(); 
    div.style.width = w; 
    div.style.height = h; 
    div.style.left = x + a.left; // Iframe's x coordinate
    div.style.top = y + a.top; // Iframe's y coordinate
});

<html>
    <head>
    </head>
    <body>
        <div>
            <div id="box" style="display: block; position: absolute; width: 1px; height: 1px; left: 7.98952px; top: 41.9606px; border: 2px solid black;"></div> 
            <p id="a">HTML width: 250.1717071533203 height: 54.38176345825195</p> 
            <iframe id="zzz" srcdoc="<html><h1>hello</h1><button> click </button></html>" width="500" height="500"></iframe> 
        </div> 
        <script>
            let elem = "";
            let myiframe = document.getElementById("zzz").contentWindow;
            let div = document.getElementById("box");
            myiframe.addEventListener("mouseover", function (e) {
                elem = e.target;
                var rect = elem.getBoundingClientRect();
                x = rect.left;
                y = rect.top;
                w = rect.width;
                h = rect.height;
                document.getElementById("a").innerHTML = elem.tagName + " width: " + w + " height: " + h;
                div.style.display = "block";
                div.style.position = "absolute";
                var a = document.getElementById("zzz").getBoundingClientRect();
                div.style.width = w;
                div.style.height = h;
                div.style.left = x + a.left;
                div.style.top = y + a.top;
                div.innerText = "...";
            });
        </script>
    </body>
</html>

【讨论】：