How to check with javascript / jquery if I click inside a div? (I did the research here - I need better)

Question

How do you check if a page click was inside a specific <div> or not?

I have a <div> with nested children, so the $("div").click() method does not work, because clicking on other elements inside will not call anything.

I need exactly this: I click on 1 element on the page and show another more complex <div> . When I go beyond this <div> , I need to hide it.

It seems simple, but I could not solve it for several hours.

I cannot use focus / blur because it describes an element.

I need the following: I click on one element - in this case - a link, and then assign it a class. Then I put the same class in the parent element of the link. This is because I need to show which <div> is the link's sibling.

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

When I click on another place on the page, I need to delete these classes. The problem is that when I click inside the <div> shown, my function thinks I clicked somewhere on the page and deleted the classes.

Answer 1

I think it’s best to install a click handler for the page and work every time 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'); }); 

Answer 2

So, the main 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 on your page with return false; in the click handler, event propagation stops and this event handler does not fire.

You can also use any of the modal dialog plugins; many have the ability to click the overlay div to close the dialog box.

Answer 3

What you might be looking for is a bubble of events. When an element on an HTML page is clicked, it receives an event, but all its ancestors do the same. 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.com/2008/04/event-bubbling-in-javascript.html

In your case, you can put your click handler on your "button" and the hide handler on the ancestor div "detail", which covers all the extra space on the page that you think you need to click to reject it?

Answer 4

Maybe I misunderstood what you are trying to accomplish, but what about something like this: http://jsfiddle.net/ufomammut66/XGXAn/

I am setting up a click event with some internal elements and using eventObject, you can determine what clicked inside the external element. Then you can add / remove classes for both the trigger element and the external element.

Answer 5

Perhaps other elements intercept the click, this should work:

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

Answer 6

Perhaps you need a blur.

 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 commands, such as the Tab key, or by mouse clicks elsewhere on the page. 

Answer 7

use delegate () to view the parent selector for your set of children. And the conditional may be what 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 } }); 

Answer 8

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

 <script type="text/javascript" src="https://ajax.googleapis.com/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>