Javascript-JQuery: 鼠标抬起时停止动作？

Question

这是我的一些代码：

$(".slider").mousedown(function(cursor) {
    $(".slider").mousemove(function(cursor) {
        $(this).css({transform:'rotate('+ degrees(cursor) +'deg)'});  
    });
});

我想让滑块只在鼠标按下时移动，当鼠标抬起时停止。但就我而言，它一直在移动！有任何想法吗？谢谢！

Answer 1

您通常不应将事件处理程序绑定到另一个事件处理程序中，在这种情况下，mousemove 事件处理程序在绑定后不会停止工作，只是因为鼠标不再按下，一次绑定了，绑定了。

只使用标志并检查

会更容易

$(".slider").on({
    mousedown: function() {
        $(this).data('mouse_is_down', true);
    },
    mouseup : function() {
        $(this).data('mouse_is_down', false);
    },
    mousemove : function(cursor) {
        if ( $(this).data('mouse_is_down') ) {
            $(this).css({
                transform: 'rotate('+ degrees(cursor) +'deg)'
            });  
        }
    });
});

cursor 看起来像这里的 event，所以不太确定它是如何工作的？

Answer 2

添加到您的代码

$(".slider").mouseup(function(cursor) {
    $(".slider").unbind("mousemove");
});

Javascript-JQuery: 鼠标抬起时停止动作？

Javascript-JQuery: stop action when mouse is up?

javascript

jquery

mouseevent

mousedown

mouseup