Question

我有一个可拖动的栏，效果很好。 https://jsfiddle.net/c2cqxcf8/2/ 但是如果我们将它拖到右边界然后向上移动鼠标并尝试将其拖动到条形图之外，用鼠标穿过最近的按钮并将鼠标移回到条形图内，我们看到应该在mouseup事件帮助下解锁的mousemove事件并不是unbined和mousemove出于某种原因。所以我试图跟踪鼠标何时被按下，这是让mousemove工作的唯一方法，但该代码到目前为止还没有解决我的问题。我依靠你的帮助，伙计们，我需要检测何时按下鼠标，只有在这种情况下让鼠标移动并移动我的栏。谢谢！

这是JS以及您可以在上面的链接中看到的整个文档。

var info;
var dest;
var result;
var between = 0;
var mouseDown = 0;
$('.bar-button').on('mousedown', function(event){
    mouseDown = 1;
    info = event.pageX;
    if(mouseDown == 1) {
        $(document).on('mousemove', function(e) {
            dest = e.pageX - info + between;
            if(dest >= 0 && dest <= 240) {
                result = dest;
            }
            $('.bar-button').css('left', result + 'px');
        })
    }
            $(document).on('mouseup', function(){
                mouseDown = 0;
                $(document).unbind();
                between = result;
            })
})

Answer 1

这是你的意思吗？

if(dest >= 0 && dest <= 240) {
    result = dest;
}else $(document).unbind('mousemove');

我补充说，当鼠标离开酒吧时，鼠标移动通道未绑定

Answer 2

我会考虑使用 dragstart ，拖动和 dragend 事件以及 mousedown ， mousemove 和 mouseup 。

我将此添加到您的代码中：

$('.bar-button').on('dragstart', function(event){

    info = event.pageX;

        $(document).on('drag', function(e) {
            dest = e.pageX - info + between;
            if(dest >= 0 && dest <= 240) {
                result = dest;
            }
            $('.bar-button').css('left', result + 'px');
        })

            $(document).on('mouseup', function(){

                $(document).unbind();
                between = result;
            });
    $(document).on('dragend', function(){

                $(document).unbind();
                between = result;
            });
});

为了给你一个想法，我在这里分叉你的小提琴https://jsfiddle.net/db5dLst2

它包含一些重复的代码作为概念证明，但它可以很好地重构为函数以避免这种情况。

如何跟踪mousepress事件？

2 个答案: