prevent mousedown function when scrollbar used

Question

I've got a div that shows onclick for a link and I want to hide when the mouse is clicked outside the div (similar to most modal box functionality) - the problem is that when the user uses the browser scrollbar, that is considered a click and hides the div

this is what i use to show the div

$('.trigger').click(function(e){
    e.preventDefault();
    open_slideout(this);
});

function open_slideout(el){
    $(document).unbind('mousedown');

    //code here to display the div if its not already shown

    //close on click-out
    $(document).bind('mousedown',function(){
        $(panel_id).removeClass('active').hide('fast');
        $(el).removeClass('active');
    });
    $('.panel.active').bind('mousedown',function(e){e.stopPropagation();});
    $('.trigger').bind('mousedown',function(e){e.stopPropagation();});
}

so I've set the stopPropagation if they click within the active area, but like I said, if they use the scrollbar it hides the div

score 3 · Accepted Answer · answered Apr 21 '11 at 16:24

3

this seems to have done the trick:

$(document.body).bind('mousedown',function(){

answered Apr 21 '11 at 16:24

GrandVizier

499
7
19

score 0 · Answer 2 · answered Apr 20 '11 at 18:50

0

$(window).scroll(function(){
   scrolling = true;
});

/*other code */
$(document).bind('mousedown',function(){
if(!scrolling){
        $(panel_id).removeClass('active').hide('fast');
        $(el).removeClass('active');
}
    }).bind('mouseup',function(){ scrolling = false; })
/*other code */

answered Apr 20 '11 at 18:50

mattsven

22,305
11
68
104

I see where you're coming from with that idea, but it doesn't work - because the scrolling variable is set to true when the scroll event is executed (whether via js, mouse wheel, or browser scrollbar) and the mousedown event gets the variable state based on past scrolling, not current state – GrandVizier Apr 20 '11 at 20:39

prevent mousedown function when scrollbar used

2 Answers2