jQuery鼠标移动事件如何停止

Question

我有一个fiddle，http://jsfiddle.net/JqBZb/193/我想让我的物体只在按下红色正方形时移动，但是当用户释放鼠标时，我无法移除mousemove操作。它在那之后仍然会移动。

HTML：

<div class="pointer">
    <div class="marker"></div>
</div>

CSS：

.marker {
    background:#ED1C24;
    height:2px;
    right:0;
    position:absolute;
    top:35px;
    width:7px
}
.pointer {
    height:72px;
    position:absolute;
    top:82px;
    width:72px;
    border:1px solid red;
 left:100px;
}

JAVASCRIPT：

var img = $('.pointer');

var offset = img.offset();

function mouse(evt) {
    var center_x = (offset.left) + (img.width() / 2);
    var center_y = (offset.top) + (img.height() / 2);
    var mouse_x = evt.pageX;
    var mouse_y = evt.pageY;
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
    var degree = (radians * (180 / Math.PI) * -1) + 90;
    img.css('-moz-transform', 'rotate(' + degree + 'deg)');
    img.css('-webkit-transform', 'rotate(' + degree + 'deg)');
    img.css('-o-transform', 'rotate(' + degree + 'deg)');
    img.css('-ms-transform', 'rotate(' + degree + 'deg)');
}

img.mousedown(function (e) {
    $(document).mousemove(mouse);
}).mouseup(function (e) {
    e.stopPropagation();
})

原始旋转脚本由此答案提供 https://dev59.com/5mkw5IYBdhLWcg3wUI_x#10235298。

- Mike

---

这个稍微好一点，如果你在鼠标松开时仍然悬停在框上，它会停止：http://jsfiddle.net/JqBZb/195/ - jdepypere

如果您使用的是较旧版本的jQuery，则请使用bind和unbind。fiddle。 - Mr_Green

Answer 1

将此代码添加到您的脚本中...

$(document).mouseup(function() {
    $(document).off("mousemove", mouse);
});

松开鼠标按键时，它会解除mousemove事件处理程序。

http://jsfiddle.net/JqBZb/201/

我还更新了jQuery的版本，以适应off()。

- Reinstate Monica Cellio

Answer 2

创建一个bool类型的变量来检查鼠标是否按下（true/false）。

 var mouseDown = false;
 if(mouseDown ==true){
   //move code
 }

DEMO

- Anton