jquery鼠标事件冲突？

Question

我正在尝试在我的一个 div“相册”上进行拖动和滚动，这是一个图像列表。

这就是我所做的

$(album).on({
    mousedown:function(){
        console.log('mousedown');
        $(album).on('mousemove', function(){
            console.log('mousemove')
        })
    }

    mouseup:function(){
        console.log('mouseup');
        $(album).off('mousemove');
    }

})

这里发生的情况是，在鼠标按下后，它会追踪 'mousemove' 大约 4 或 5 次，然后它会停止追踪，并且会出现一个小的无操作图标以及我单击的图像的透明版本。然后，如果我在这里放开鼠标，它就不会追踪到'mouseup'。但是，如果我单击 div 并且不移动鼠标然后放开，它会追踪“mouseup”。

为什么控制台不继续跟踪鼠标移动，为什么不跟踪 mouseup？谢谢。

Answer 1

给你，伙计！完美！！

工作Fiddle

HTML

<div class='album'></div>

JQuery

$('body').on('mousedown', '.album', function(e){
    e.preventDefault();
    console.log('mousedown');

    $(this).on('mousemove', function(){
       console.log('mousemove');
    });

    $(this).on('mouseup', function(){
       $(this).off('mousemove');
       console.log('mouseup');  
     });

});

Answer 2

如果我们以不同的方式来处理它会怎样：

var itIsClicked;

$(album).on("mousedown", function(){
    itIsClicked = true;
});

$(album).on('mousemove', function(){
    if(itIsClicked) {
        console.log('mousemove');
    }
});

$(album).on("mouseup", function(){
    itIsClicked = false;
});

嵌套事件虽然看起来很有意义，但可能会遇到您所描述的那种麻烦。虽然我很想听听关于它为什么不适合你的任何理论。