防止在按住鼠标按钮时触发 jquery mouseleave 事件

Question

我有一段简单的代码，它在鼠标悬停在容器上时显示滚动条，并在鼠标离开时淡出：-

$('#sidebar-wrapper').on('mouseenter mouseleave', '#TopPane, #BottomPane', function(e){

var $div = $(this).find ('.jspDrag');


    if ( e.type == 'mouseenter') {
    $div.show();
    }

    if ( e.type == 'mouseleave' ) { 
    $div.fadeOut('600');
    }


});

我想要做的是在 $('.jspDrag') 上有一个 mousedown 事件，这将阻止 mouseleave 事件在鼠标被按住的整个持续时间内触发。

这个想法是，如果用户通过按住鼠标移动滚动条上的按钮，他们可能会不小心滑出元素，如果这样我不希望自定义滚动条 div 淡出，只要仍然按住鼠标左键。

我玩过 setTimeout 和 mousedown 事件，但能够找到提供正确行为的解决方案。有什么想法吗？

编辑：

只是为了提供更多细节 - 我正在寻找与“facebook”侧边栏自定义滚动条相同的行为。在 Facebook 上，当您将鼠标悬停在侧边栏上时，滚动条就会出现，我的也是如此。但是在 Facebook 上，如果您按住鼠标并将鼠标移出侧边栏，甚至移到实际的浏览器滚动条上，自定义滚动条仍然可见且处于活动状态。这是我想效仿的行为。

编辑 2：

我添加了一个 JsFiddle 来按要求进行演示。我已经尽可能地剥离了 css/内容。如果您将鼠标悬停在顶部 div 上，您将看到隐藏的自定义滚动条出现。

http://jsfiddle.net/wSMVg/

Answer 1

一个简单的解决方案是：

var mousedown = 0;
$('#sidebar-wrapper').mousedown(function(){
    mousedown = 1;
});
$('#sidebar-wrapper').mouseup(function(){
    mousedown = 0;
});
$('#sidebar-wrapper').on('mouseenter mouseleave', '#TopPane, #BottomPane', function(e){
    var $div = $(this).find ('.jspDrag');
    if ( e.type == 'mouseenter') {
        $div.show();
    }
    if ( e.type == 'mouseleave' ) { 
        if (mousedown == 0){
            $div.fadeOut('600');
        }
    }
});

只是不确定$('#sidebar-wrapper') 是否是正确的object :)

编辑：

这是 jsfiddle：http://jsfiddle.net/wSMVg/5/

Answer 2

var mouseDown = false;
var mouseIsOver = false;

$('#sidebar-wrapper').on('mouseenter mouseleave mousedown mouseup', '#TopPane, #BottomPane', function(e){

var $div = $(this).find ('.jspDrag');
    if ( e.type == "mousedown" ) {
        mouseDown = true;
    }

    if ( e.type == "mouseup" ) {
        mouseDown = false;
        if ( !mouseIsOver ) {
            $div.fadeOut('600');
        } 
    }

    if ( e.type == 'mouseenter') {
        mouseIsOver = true;
        $div.show();
    }

    if ( e.type == 'mouseleave') { 
        mouseIsOver = false;
        if ( !mouseDown ) {
            $div.fadeOut('600');
        }
    }
});