更好的方式來使用mousedown和mousemove？

我正在使用以下內容來圍繞中心點旋轉元素。更好的方式來使用mousedown和mousemove？

$('.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。

Codepen這裏：https://codepen.io/DaveVan/pen/QvJORb

來源

2017-06-10 DaveVan

事件處理程序內部的事件處理程序是一個禁忌。此外，你會錯誤地採取這種方式，在文檔級別偵聽移動並按目標進行過濾等。 – adeneo

感謝您的回覆@ adeneo。我相當新的JavaScript，爲什麼你不應該把事件處理程序內的事件處理程序？ – DaveVan

如果下面的答案之一回答你的問題，這個網站的工作方式，你會「接受」的答案，更在這裏：*** [當有人回答我的問題，我該怎麼辦？]（http：// stackoverflow.com/help/someone-answers)***。但前提是你的問題確實得到了回答。如果不是，請考慮在問題中添加更多詳細信息。 – FrankerZ

綁定到document外部捕獲事件。見this updated pen。

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

來源

2017-06-10 17:56:56 FrankerZ

這正是我正在尋找的，謝謝@FrankerZ。 – DaveVan

更好的方式來使用mousedown和mousemove？

回答

相關問題