CODEWITHSUNDEEP
javascriptjqueryhtmldom
Hižko Hiiž
Hižko Hiiž

Reputation: 51

How to check with javascript/jquery if i clicked inside div?(i did research in here-i need better)

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 complex <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.

Upvotes: 4

Views: 8582

Answers (8)

Alex Okrushko
Alex Okrushko

Reputation: 7372

I think what you are looking for is 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>

Upvotes: 0

ZapRowsdower910
ZapRowsdower910

Reputation: 3214

I may have misunderstood what your trying to accomplish but how about something like this: http://jsfiddle.net/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.

Upvotes: 1

josh3736
josh3736

Reputation: 144882

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.

Upvotes: 2

lincolnk
lincolnk

Reputation: 11238

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');
  });

Upvotes: 5

Eric Hodonsky
Eric Hodonsky

Reputation: 5897

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
    }
});

Upvotes: 0

Kshitij Banerjee
Kshitij Banerjee

Reputation: 1748

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

Upvotes: 0

Chris Subagio
Chris Subagio

Reputation: 6329

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.com/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?

Upvotes: 1

mbillard
mbillard

Reputation: 38842

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

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

Upvotes: 0

Related Questions