从而鼠标按键被按住

Question

我有一段简单的代码，显示滚动条，当鼠标在一个容器中，并淡出出来射击防止jQuery的鼠标离开事件当鼠标离开： -

$('#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淡出，只要因为鼠标左键仍然按下。

我有playd与setTimeout但mousedown事件，但已能够找到一个解决方案，提供正确的行为。有任何想法吗？

编辑：

只是为了提供更多的细节 - 我在寻找相同的行为在“脸谱”侧边栏自定义滚动条有。在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'); 
     } 
    } 
});