Javascript OnMouseMove拖动时，目标错误地拦截事件

我有一个目标，它应该在它的父对象中移动，单击该父对象

一些小提琴：

一些HTML：

<div id="rControl">
  <p>R1 / R2</p>
  <div class="widget">
    <div class="target"></div>
  </div>
</div>

问题是目标在拖动时会抖动。第一个事件似乎将小部件放在光标下，第二个事件发生在目标上而不是小部件背景上，因此偏移量现在是相对于目标的，而不是相对于父小部件的，偏移量值要小得多。目标现在错误地移动到小部件的左上角

显然，目标不应该处理这些事件，也不应该基于目标的位置提供点击位置信息

我如何才能做到这一点，以便在每次触发事件时，无论鼠标是否位于

.target

中，都能获得鼠标相对于

.widget

的位置

---

此外，我希望在不重新排列HTML强制小部件下的目标的情况下执行此操作，我肯定缺少了一点棘手的事件委派魔法。

只需过滤掉

mousemove

调用，仅对

小部件

触发的调用执行操作：

更新了JS（只需对

mousemove

if

）做一个小改动：

---

请参阅。

如果在事件中使用其他X/Y，会发生什么情况？比如说，

pageX

和

pageY

，通过调整将坐标定位到容器中。@muistooshort哦，这些看起来保持一致，尽管在错误的范围内。但还没有找到如何找到我想要的元素的原点的X/Y页。问题是，它只会在您离开目标后触发移动目标的代码。它不光滑。我最终基本上做到了这一点，并使用了一个非常小的目标元素，因此它以极大的粒度到达了边缘。但是我希望能把靶子做成任何尺寸，并且像黄油一样光滑；这实际上是一样的，像黄油一样光滑。：）让我知道，我会更新答案……这也不一样：（如果目标是十字线，这看起来很傻。没问题，只需要稍微调整一下。这是一把小提琴，目标位于鼠标中心：

rControl = $('#rControl')
widget = rControl.find '.widget'
target = rControl.find '.target'

clicked = no
widget
  .mousedown =>
    clicked = yes

  .mouseup =>
    clicked = no

  .mousemove (e) =>
    if clicked
      target.css
        top:  "#{e.offsetY}px"
        left: "#{e.offsetX}px"

rControl = $('#rControl')
widget = rControl.find '.widget'
target = rControl.find '.target'

clicked = no
widget
  .mousedown =>
    clicked = yes

  .mouseup =>
    clicked = no

  .mousemove (e) =>
    if clicked and e.target == widget[0]
      target.css
        top:  "#{e.offsetY}px"
        left: "#{e.offsetX}px"