How do you check whether the click on a page was inside a certain <div> or not?

I have a <div> with nested children, so $("div").click() technique doesn't work because clicking on other elements inside won't trigger anything.

What i need exactly is this: I click on 1 element on a page and show the other more plex <div>. When I click outside of this <div>, I need it to hide.

This seems simple, but I've been unable to solve it for a few hours now.

I can't use focus/blur because it outlines the element.

What I need is this: I click on 1 element—in this case a link—then assign it a class. I then put the same class on the parent of the link. This is because I need to show which <div> is a sibling of the link.

In my CSS, I have something like parent.class{ mydiv{display:block;} }).

When I click somewhere else on the page, I need to delete those classes. The problem is when I click inside the shown <div>, my function thinks I clicked somewhere on the page and deletes the classes.

How do you check whether the click on a page was inside a certain <div> or not?

I have a <div> with nested children, so $("div").click() technique doesn't work because clicking on other elements inside won't trigger anything.

What i need exactly is this: I click on 1 element on a page and show the other more plex <div>. When I click outside of this <div>, I need it to hide.

This seems simple, but I've been unable to solve it for a few hours now.

I can't use focus/blur because it outlines the element.

What I need is this: I click on 1 element—in this case a link—then assign it a class. I then put the same class on the parent of the link. This is because I need to show which <div> is a sibling of the link.

In my CSS, I have something like parent.class{ mydiv{display:block;} }).

When I click somewhere else on the page, I need to delete those classes. The problem is when I click inside the shown <div>, my function thinks I clicked somewhere on the page and deletes the classes.

• javascript
• jquery
• html
• dom

• This question's purpose is extremely sporadic. Can you try to clarify your intentions? Try to stick to one problem. – user1385191 Commented Jan 24, 2012 at 21:34

8 Answers 8

I think your best bet is to set a click handler for the page and work your way up whenever it fires.

  $(document).click(function(e) {

    var d = e.target;

    // if this node is not the one we want, move up the dom tree
    while (d != null && d['id'] != 'myDiv') {
      d = d.parentNode;
    }

    // at this point we have found our containing div or we are out of parent nodes
    var insideMyDiv = (d != null && d['id'] == 'myDiv');
  });

So a basic menu-type interaction?

<a href="#" id="open">Open</a>
<div id="menu" style="display:none;"> ... </div>

$('#open').click(function(e) {
    e.preventDefault();
    var m = $('#menu').show();
    $(document).on('click.mnu', function(e) {
        if (m[0] === e.target || m.has(e.target).length > 0) {
            e.preventDefault();
            m.hide();
            $(document).off('.mnu');
        }
    }
}

Remember that if you have a link elsewhere in your page that has a return false; in a click handler, the event propagation gets stopped and this event handler won't run.

You could also just use any of the modal dialog plugins; many have an option to make clicking the overlay div close the dialog.

What you might be looking for is event bubbling. When an element on an HTML page is clicked, it gets an event, but so do all of its ancestors. Usually. Each element may decide to block the signal.

Here's an overview of how to get a parent to do something when a child is clicked: http://www.ender./2008/04/event-bubbling-in-javascript.html

In your case, you could put your click handler on your "button", and the hide handler on an ancestor of the "detail" div that covers all of the additional space on page that you consider appropriate to click on for dismissing it?

I may have misunderstood what your trying to acplish but how about something like this: http://jsfiddle/ufomammut66/XGXAn/

I setup a click event with some inner elements and using the eventObject your able to determine what was clicked inside the outer element. Then you can add/remove classes to both the trigger element and the outside element.

Maybe other elements are intercepting the click, this should work:

$('#div_id, #div_id *').click(function(e) {
  // ... clicked somewhere inside the div
}

What you need is the "blur" event probably.

The blur event is sent to an element when it loses focus. Originally, 
this event was only applicable to form elements, such as <input>. 
In recent browsers, the domain of the event has been extended to 
include all element types. An element can lose focus via keyboard 
mands, such as the Tab key, or by mouse clicks elsewhere on the page.

use delegate() to watch a parent selector, for your set of children. And the conditional can be what ever you want.

$("div.wrapper").delegate("a, span.link", "click", function(event){
    event.preventDefault();
    if($(this).hasClass("link")){
        //Do span.link stuff
    }else{
        //do default link stuff
    }
});

I think what you are looking for is event.stopPropagation().

<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript">
$(document).on('click','#shower', function(event){
    event.stopPropagation();
    $('#moreComplex').show();
});
$(document).on('click','body', function(){
    $('#moreComplex').hide();
});
</script>

<div id="hider">
    <p>Clicking on this div or on any other element in the body will hide Complex div</p>
    <div id="shower">
        <p>Click to show Complex div</p>
    </div>
</div>
<div id="moreComplex" style="display:none">
    <p>More Complex div</p>
</div>