MouseEvent.clientX 和 MouseEvent.clientY 使用 CSS 缩放变换的意外结果

Question

$('body').on('mousemove', function (ev) {
    $('span').text(`x: ${ev.clientX}, y: ${ev.clientY}`)
})

body {
  padding: 0;
  margin: 0;
}

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #333;
  transform: scale(2, 2);
}

span {
  position: absolute;
  left: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div"></div>
<span id="my-span"></span>

我只是想知道为什么缩放的 div returns x 和 y MouseEvent 坐标在 0 到 150 范围内而不是 0 到 200 范围内？ scale 属性设置为 2，所以我认为这将是第二个范围而不是第一个。有人可以解释吗？这是 link 到 js fiddle page。

我注意到 Whosebug 上有很多类似的问题，所以这可能是重复的。但是，我在 CSS 中找不到任何关于像素、坐标和比例变换的具体问题。不过我可能漏掉了什么...

谢谢！

Answer 1

div 是相对于它的中心缩放的，所以它的一部分最终在屏幕之外。（注意这一点的一种方法：向 div 添加边框，并确保它没有完全环绕。）

尝试在 div 上使用 transform-origin: top left; - 我认为这会达到您的预期。

Answer 2

因为 transform-origin 默认位于中心，所以 div 的一半在 top/left 屏幕之外。

要么更新变换原点：

$('body').on('mousemove', function (ev) {
    $('span').text(`x: ${ev.clientX}, y: ${ev.clientY}`)
})

body {
  padding: 0;
  margin: 0;
}

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #333;
  transform: scale(2, 2);
  transform-origin:0 0;
}

span {
  position: absolute;
  left: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div"></div>
<span id="my-span"></span>

或增加一些边距：

$('body').on('mousemove', function (ev) {
    $('span').text(`x: ${ev.clientX}, y: ${ev.clientY}`)
})

body {
  padding: 0;
  margin: 0;
}

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #333;
  transform: scale(2, 2);
  margin:50px;
}

span {
  position: absolute;
  left: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div"></div>
<span id="my-span"></span>

MouseEvent.clientX 和 MouseEvent.clientY 使用 CSS 缩放变换的意外结果

MouseEvent.clientX and MouseEvent.clientY Unexpected Results With CSS Scale Transform

javascript

css

mouse

coordinates