jQuery mousemove如何停止 [英] jquery mousemove how to stop
问题描述
我有这个小提琴 http://jsfiddle.net/JqBZb/193/希望我的对象仅在按下红色方框时才移动,但是当用户释放鼠标时我无法删除mousemove动作.在那之后它仍然会移动.
I have this fiddle http://jsfiddle.net/JqBZb/193/ where I want my object to move only when the red square is pressed, but I cannot remove the mousemove action when the user releases the mouse. It still moves after that.
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:
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://stackoverflow.com/a/10235298/1168944
The original rotation script was provided by this answer https://stackoverflow.com/a/10235298/1168944
推荐答案
将此添加到脚本中...
Add this to your script...
$(document).mouseup(function() {
$(document).off("mousemove", mouse);
});
每当您释放鼠标按钮时,它将取消绑定mousemove
事件处理程序.
It unbinds the mousemove
event handler whenever you release the mouse button.
http://jsfiddle.net/JqBZb/201/
为了适应off()
,我也将其更新为jQuery的更高版本.
I updated it to a later version of jQuery as well, in order to accommodate off()
.
这篇关于jQuery mousemove如何停止的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!