從而鼠標按鍵被按住

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'); 
     } 
    } 
});