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的playd但是mousedown事件但是能够找到提供正确行为的解决方案。有什么想法吗？

编辑：

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

编辑2：

我添加了一个JsFiddle以按要求进行演示。我尽可能地删除了css /内容。如果您将mose悬停在顶部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');
        }
    }
});

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

2 个答案: