OnMouseMove拖拽，目标错误拦截事件

Question

我有一个目标，它应该在它的父元素中移动，当父元素被点击时

Some Fiddle: http://jsfiddle.net/GMerZ/

一些HTML:

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

一些jQuery通过CoffeeScript:

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"

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

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

无论鼠标是否在.target中，我如何使此工作使我在每次触发事件时获得相对于.widget的鼠标位置?

另外，我希望在不重新安排HTML的情况下做到这一点，迫使目标在小部件下，必须有一个棘手的事件委托魔法我错过了。

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"