使用 mousedown 和 mousemove 的更好方法？答案

【问题标题】：Better way to use mousedown and mousemove?使用 mousedown 和 mousemove 的更好方法？
【发布时间】：2017-06-11 01:56:56
【问题描述】：

我正在使用以下内容围绕中心点旋转元素。

$('.marker').on 'mousedown': ->
  $(this).on 'mousemove': ->
    rotateAnnotationCropper $('.innerCircle').parent(), event.pageX, event.pageY, $(this)

不确定是否需要这样做，但它正在调用的函数如下。

rotateAnnotationCropper = (offsetSelector, xCoordinate, yCoordinate, markerNumber) ->
  x = xCoordinate - (offsetSelector.offset().left) - (offsetSelector.width() / 2)
  y = -1 * (yCoordinate - (offsetSelector.offset().top) - (offsetSelector.height() / 2))
  centerAngle = 90 - (Math.atan2(y, x) * 180 / Math.PI)
  rotate = 'rotate(' + centerAngle + 90 + 'deg)' + ' translateX(-50%)'

它可以正常工作，但有一个例外。当我围绕中心点移动光标时，我必须将光标准确地保持在元素上，否则移动将停止。即使光标延伸到元素之外，我如何保持元素移动的任何想法？

我目前在 5 个元素上使用 .marker 类。

在此处编写代码：https://codepen.io/DaveVan/pen/QvJORb

【问题讨论】：

事件处理程序中的事件处理程序是禁止的。此外，您这样做的方式是错误的，请在文档级别监听移动，并按目标等进行过滤。
感谢@adeneo 的回复。我对 javascript 很陌生，为什么不将事件处理程序放在事件处理程序中？
如果以下答案之一回答了您的问题，本网站的工作方式，您将“接受”答案，更多信息请点击此处：What should I do when someone answers my question? 。但前提是你的问题真的得到了回答。如果没有，请考虑在问题中添加更多详细信息。
因为每次你在元素上按下鼠标时，都会绑定另一个 mousemove 处理程序，最终你会得到一堆它们，可能会相互抵消。跨度>

标签： javascript jquery coffeescript

【解决方案1】：

绑定到document 以捕获外部事件。见this updated pen。

$('.marker').on 'mousedown': ->
  marker = this
  $(document).on 'mousemove': ->
    rotateAnnotationCropper $('.innerCircle').parent(), event.pageX, event.pageY, $(marker)

【讨论】：

这正是我想要的，谢谢@FrankerZ。