Kurkula
Kurkula

Reputation: 6762

Jquery Find if Event is a scrollbar click

I have a scenario where I am hiding a Div block if I click any where out side that div block.

I am using Internet explorer and testing the application. My code works fine if there is no scroll bar. If there is a scroll bar on the div block then when I click on scroll bar it considers scroll bar not as part of div and it hide the div block. I am trying to keep div block open even if user clicks on scroll bar and do a scroll operation.

var $container = $(".toolbarBlock");

 $(document).mouseup(function (e) {
        if (!$container.is(e.target) // if the target of the click isn't the container...
            && $container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            toolbarClose();
        }
    });

 function toolbarClose() {
    return $.when(slideOut($container));
 }

Upvotes: 8

Views: 14440

Answers (2)

Kurkula
Kurkula

Reputation: 6762

I would like to post answer so that it would be helpful to others who came across same problem.

I used:

e.target != $('html').get(0) // nor the scrollbar

var $container = $(".toolbarBlock");

$(document).mouseup(function (e) {
    if (!$container.is(e.target) // if the target of the click isn't the container...
        && ($container.has(e.target).length === 0) // ... nor a descendant of the container
        && (e.target != $('html').get(0))) // nor the scrollbar
    {
        toolbarClose();
    }
});

function toolbarClose() {
    return $.when(slideOut($container));
}

Upvotes: 26

David
David

Reputation: 29

There is no click event for a scroll bar in jQuery. http://forum.jquery.com/topic/click-event-for-scrollbar

However there is a .scroll() http://api.jquery.com/scroll/

You could listen for scroll events and show the container.

So as soon as they click the bar the element would hide, but when they scroll you could show the element again.

Not ideal, but from my research that is the only option.

Upvotes: 2

Related Questions