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”事件处理程序不会被触发，因为当您释放鼠标时您的鼠标不在复选框上方。例如，您必须将事件绑定到文档。

然后，与绑定和解除绑定事件处理程序不同，存储鼠标状态可能更容易，并且仅在按下鼠标时才旋转。

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 函数来确定旋转角度，并且您可能还需要调整半径。