CODEWITHSUNDEEP
jqueryeventschildren
HelpNeeder
HelpNeeder

Reputation: 6480

Prevent click event to fire when clicked within element, including any and all of its children elements

I have a script which opens and closes a fixed element. There's an overlay where's black background (like facebook when clicking on video) and when user clicks anywhere on the black, the overlay will be closed. But, if user clicks on the inner container, or any of elements should stay open.

My script closes the inner container if I click on any children. How to prevent this?

docu = $(document),
quot = $('.quote'),
quot_over = $('.quote_overlay'),
quot_cont = $('.quote_container');

quot.click(function(event) {
    quot_over.toggle(1, function() {
        docu.click(function(event) {
            var target = $(event.target);

            if(!target.is(quot_cont)) {
                quot_over.hide();

                docu.unbind('click');
            }
        });
    });
});

Upvotes: 0

Views: 38

Answers (1)

Frayt
Frayt

Reputation: 1223

I'm not sure why you have this line in there:

quot_over.toggle(1, function()

But that closes it immediately before it evaluates where the click was, so you need to remove that.

Secondly, you are only checking if the click is on quote_container, and not checking if it is on any of quote_container's children.

Working JSFiddle: http://jsfiddle.net/dsnosw5p/4/

Upvotes: 1

Related Questions