javascript - OnMouseMove拖动，目标错误拦截事件

Question

我有一个目标应该在它的父级中移动，点击该父级。

一些 fiddle :http://jsfiddle.net/GMerZ/

一些 HTML:

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

一些通过 CoffeeScript 的 jQuery:

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"

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

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

我怎样才能使它工作，以便在每次触发事件时获得鼠标相对于 .widget 的位置，而不管鼠标是否在 .target< 中?

此外，我很乐意在不重新排列 HTML 强制目标位于小部件下的情况下执行此操作，我一定缺少一些棘手的事件委托(delegate)魔术。

Answer 1

只需过滤掉 mousemove 调用，只对 widget 触发的调用进行操作:

更新的 JS(只是对 mousemove if 的一个小改动):

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"

参见 on jsfiddle .