Question

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

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

＆＃13;

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" );
});

＆＃13;

 <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>

＆＃13;

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

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

jQuery中的鼠标按事件

1 个答案: