jQuery：鼠标事件的偏移位置答案

【问题标题】：jQuery: Offset position with mouse eventjQuery：鼠标事件的偏移位置
【发布时间】：2019-01-08 11:25:35
【问题描述】：

我目前正在编写一个块断路器作为 jQuery 练习，我的球拍有问题，当我离开左侧的比赛场地时，它会改变位置。

我是所有鼠标事件的新手，我尝试了很多在 stackoverflow 或互联网上找到的解决方案和想法，甚至更改了我的整个代码，但我发现拥有正确位置的唯一方法是使用 mouseleave 事件创建条件以更正偏移量。但我不喜欢它，因为如果鼠标在我之前没有的运动场上方或下方，它会导致更多的位置问题。

这可能是第二部分不起作用，但我不知道如何更改它。

racket.left = Math.min(canvasWidth - racket.width, Math.max(2, e.offsetX));

查看 JSFiddle 以了解我的意思：https://jsfiddle.net/Shilok/29wu6gj8/1/

我想要与右侧相同的行为：当球拍接触任一侧并且鼠标离开比赛场地时，球拍保持原位（粘在一边！）

有什么想法吗？

【问题讨论】：

标签： jquery offset mousemove

【解决方案1】：

你还需要一些东西

您使用的事件的 offsetX 取决于您悬停在哪个元素上。您应该使用 pageX 对其进行规范化，而不是始终返回相对于整个文档的左侧。
您应该将 Math.min 包裹在 Math.max 中，以防止其低于 0。
您需要考虑.canvas 本身的偏移量。
您还应该重新计算窗口的resize 事件的偏移量

var canvasWidth, racket, canvasOffset;

$(document).ready(init);

function init() {
  $(window).resize(calculate).trigger('resize');
  $(window).on('mousemove', moveRacket);
}

function calculate() {
  canvasWidth = $('.canvas').width();
  racket = {
    width: $(".racket").width()
  };
  canvasOffset = $('.canvas').offset()
}

function moveRacket(e) {
  var minLeft = Math.max(0, e.pageX - canvasOffset.left - racket.width / 2),
    maxLeft = canvasWidth - racket.width;

  racket.left = Math.max(Math.min(maxLeft, minLeft), 0);
  $('.racket').css('left', racket.left + 'px');
}

html {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
}

.canvas {
  position: absolute;
  background: green;
  width: 500px;
  height: 200px;
}

.racket {
  position: absolute;
  width: 100px;
  height: 14px;
  bottom: 12px;
  left: 0;
  background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="canvas">
  <div class="racket"></div>
</div>

在https://jsfiddle.net/0p9ke2wa/更新小提琴

【讨论】：