如何跟踪鼠标按下事件

How to track mousepress event?

本文关键字：鼠标 事件 跟踪 何跟踪      更新时间：2023-09-26

我有一个可拖动的条，它工作得很好。https://jsfiddle.net/c2cqxcf8/2/但如果我们把它拖到右边框然后向上拖动鼠标并试着把它拖到栏外，用鼠标穿过最近的按钮并让鼠标回到栏内，我们会看到本来应该在mouseup事件的帮助下解除绑定的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;
            })
})

我会考虑将dragstart、drag和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

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

你是这个意思吗?

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

我添加了else，当鼠标脱离栏时，鼠标移动通道被解除绑定

相关文章：