点击位置可变的HTML span元素后，如何获取其位置？

嘿，针对你这个位置会变化的<span>元素，点击时要获取它的实时位置，我给你几个实用的方案：

方法1：用getBoundingClientRect()获取视口相对位置（最推荐） #

getBoundingClientRect()是获取元素实时位置最靠谱的方法，它会返回元素相对于浏览器视口的坐标信息，不管元素怎么移动，每次调用都会拿到最新的位置数据。

你已经在onclick里传入了event参数，刚好可以利用它来定位被点击的元素：

function OpenFlyout(cellId, num, event) {
  // 获取触发点击的span元素
  const targetSpan = event.currentTarget;
  // 获取元素的实时位置矩形信息
  const rect = targetSpan.getBoundingClientRect();
  
  // 提取你需要的坐标值
  const position = {
    // 视口左上角为原点的坐标
    viewportLeft: rect.left,
    viewportTop: rect.top,
    // 如果需要相对于整个文档的坐标（考虑页面滚动）
    docLeft: rect.left + window.scrollX,
    docTop: rect.top + window.scrollY,
    // 元素自身的宽高也能拿到
    width: rect.width,
    height: rect.height
  };
  
  console.log('点击时span的位置：', position);
  
  // 你原本的OpenFlyout业务逻辑...
}

方法2：用offsetLeft/offsetTop获取父元素相对位置 #

如果你需要的是元素相对于它的定位父元素（设置了position: relative/absolute/fixed的父元素）的位置，可以用这两个属性：

function OpenFlyout(cellId, num, event) {
  const targetSpan = event.currentTarget;
  // 相对于定位父元素的偏移量
  const relativeLeft = targetSpan.offsetLeft;
  const relativeTop = targetSpan.offsetTop;
  
  console.log('相对于父元素的位置：left=' + relativeLeft + ', top=' + relativeTop);
  
  // 原有业务逻辑...
}

注意：如果父元素没有设置定位，offsetLeft/offsetTop会相对于文档根节点计算。

额外小技巧：单独拆分获取位置的逻辑 #

如果你不想修改现有的OpenFlyout函数，也可以在onclick里单独加一个获取位置的方法：

<span class="btnFlyout" id="btn4" style="width: 52px; cursor: pointer; border: 1px solid rgb(240, 240, 240);" 
      onmouseover="HoverButton('btn4', null)" 
      onmouseout="LeaveButton('btn4', '')" 
      onclick="getSpanPosition(event); OpenFlyout('cell4', 4, event)"> 
  <span class="txtFlyout" style="left: 4px;"> measure </span> 
  <img class="arrowFlyout" src="../stdicons/ic...">
</span>

然后定义单独的函数：

function getSpanPosition(event) {
  const rect = event.currentTarget.getBoundingClientRect();
  console.log('点击时span的实时位置：', rect);
}

这样就能轻松拿到点击瞬间span的准确位置啦～

内容的提问来源于stack exchange，提问作者Michael