如何获取缩放元素上的正确鼠标点击坐标？

当元素通过transform: scale()缩放后，直接用pageX/pageY计算的坐标会和元素原始布局的坐标系统不匹配，导致插入的元素位置偏移。以下是修正方案：

修正后的完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper" style="height: 200px;width: 200px;border: 1px solid navy;position: relative;transform: scale(2);transform-origin: 0 0;"></div>

CSS #

.element {
  border: 1px dashed orange;
  position: absolute;
}

#wrapper {
  /* 缩放样式已移至HTML内联，方便测试 */
}

JavaScript #

$("#wrapper").click(function(e) {
  const $wrapper = $(this);
  // 获取wrapper自身的页面偏移量
  const wrapperOffset = $wrapper.offset();
  // 计算鼠标相对于wrapper左上角的视觉坐标
  let relX = e.pageX - wrapperOffset.left;
  let relY = e.pageY - wrapperOffset.top;
  
  // 获取元素的计算样式，提取缩放比例
  const computedStyle = window.getComputedStyle(this);
  const transformValue = computedStyle.transform;
  
  if (transformValue !== 'none') {
    // 解析transform矩阵，提取X/Y方向的缩放值
    const matrixParams = transformValue.match(/matrix\(([^)]+)\)/)[1].split(',').map(Number);
    const scaleX = matrixParams[0];
    const scaleY = matrixParams[3];
    
    // 将视觉坐标转换为wrapper原始布局的坐标
    relX /= scaleX;
    relY /= scaleY;
  }
  
  // 创建并插入目标元素
  $("<div class='element' style='width:50px;height:50px'></div>")
    .css({ top: relY, left: relX })
    .appendTo($wrapper);
});

关键修正点 #

• 调整坐标基准：将原来基于wrapper父元素的偏移计算，改为直接使用wrapper自身的offset()，确保坐标相对wrapper左上角。
• 提取缩放比例：通过getComputedStyle获取元素的transform矩阵，从矩阵参数中提取X、Y方向的缩放值（矩阵第1、4位对应scaleX、scaleY）。
• 坐标转换：把鼠标的视觉坐标除以缩放比例，转换为wrapper原始布局坐标系统中的位置，让插入元素精准匹配点击位置。

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