javascript - jQuery 中的鼠标按下事件

Question

我需要在 jQuery 中检测鼠标按下事件。我看到这个question和 it's answer 。这正是我需要的，因为这里只有按下并移动鼠标时才会发生该操作。它不是一个点击事件，它是鼠标按下和移动事件的组合。

我不明白如何实现它。目前我使用以下代码旋转 div，但此代码基于 mousedown 事件:

var rotation = 0;
jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
};
                    
$('.resizeButton').on("mousedown", function(e) {
    var startX = e.pageX;
    $(document).mousemove(function(e){
        rotation = startX - e.pageX;
        $('.test').rotate(rotation);
    });
});
$('.resizeButton').on("mouseup", function(){
    $(document).unbind( "mousemove" );
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Hello
    <button class="resizeButton"> </button>
</div>

请帮忙将其转换为鼠标按下并移动事件，以便用户可以轻松地通过按下该按钮来调整旋转，并旋转到任意方向并释放鼠标按下。当用户释放鼠标时，需要在该特定的鼠标释放点上设置旋转。

Answer 1

您的代码中存在一些问题。

首先，“mouseup”事件处理程序不会被触发，因为当您释放鼠标时，鼠标并未位于复选框上方。例如，您必须将事件绑定(bind)到文档。

然后，存储鼠标状态并仅在按下鼠标时旋转可能更容易，而不是绑定(bind)和取消绑定(bind)事件处理程序。

var rotation = 0;
var rotating = false;
var startX = 0;

jQuery.fn.rotate = function(degrees) {
  $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
};
                    
$(document).mousemove(function(e){
  if (!rotating) return;
  rotation = startX - e.clientX;
  $('.test').rotate(rotation);      
});

$(document).on("mouseup", function(){
  rotating = false;
});

$('.resizeButton').on("mousedown", function(e) {
  rotating = true;
  startX = e.clientX;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Hello 

<button class="resizeButton"> </button></div>

要让按钮在旋转过程中跟随鼠标指针，您可能需要使用一些 sin 和 cos 函数来确定旋转 Angular ，并且可能还需要调整半径。