How can I select body outside an element using jquery

Question

I need the exact functionality what jQuery light box does. In my project in a loop, I have a hidden element for every item. When a visitor will click on the element, he/she will see the hidden element. Then, when the visitor will click outside the element (new), the element will hide again. But, the element has an anchor tag. So, if the visitor will click on the element, he/she can go to the link. I have to find out how I can select the area which is outside of the element.

I am giving here a simple HTML.

<div style="width:500px; height: 500px; background: #000;" id="one">            

</div>
<div rel="maisha" style="width:500px; height: 500px; background: #ff0; display: none;" id="two">            
    <a href="http://www.webdeveloperszone.com"> WDZ </a>
</div>

Javascript:

<script>        
    $("#one").click(function(){
       $("#one").hide();
       $("#two").show();               
    });            
</script>

Now I need the code by I can implement: "When a visitor clicks outside of id="two", it will show div id="one" again and div id="two" will hide. But, if he/she clicks inside div id="two", it has another functions.

maybe this link can help you: http://stackoverflow.com/questions/6635659/jquery-bind-click-anything-but-element — Hugo S. Mendes, Jul 18 '14 at 13:47

score 0 · Answer 1 · answered Jul 18 '14 at 13:54

Seems like you are looking for event.stopPropagation();

Just add a click handler to the element on which click #two should hide (e.g. body):

    $("body").click(function(){
       $("#one").show();
       $("#two").hide();               
    });

and add a event handler for #two:

    $("#two").click(function(e){
       //do something
       e.stopPropagation();             
    });

Usually the bodys click handler (if there is one) will be called if you click on #two, but e.stopPropagation(); prevents this behavior.

score 0 · Answer 2 · answered Jul 18 '14 at 13:55

The following technique will let you be able to define element(s) of the document which shouldn't trigger a close/hide when clicked.

First define the elements that should be hidden (or any action) when clicking anywhere on the document.

$('body').on('click', function() {
  // Hide elements here
  $('.elements').hide();
});

To prevent your element(s) from hiding when clicking inside of them you should use event.stopPropagation()

$('.elements').on('click', function(e) {
  // This will stop the event from "bubbling" the click event up the DOM to the body
  e.stopPropagation();
});

score 0 · Answer 3 · answered Jul 18 '14 at 14:13

When you click on #one you can assign a click event to the document that will hide #two and show #one again. You can also assign a click event to #two that will stop the click event from propagating. event.stopPropagation() will prevent the document click event from happening. Also once the document click event is fired, you can turn it off so that its not constantly firing whenever the document is clicked again.

Here is an example: http://jsfiddle.net/6fg5Y/1/

$(document).ready(function(){
    $("#two").click(function(e){
        e.stopPropagation();
    });

    $("#one").click(function(e){
        e.stopPropagation();
        $(this).hide();
        $("#two").show();

        $(document).on("click", function(e){
            $("#one").show();
            $("#two").hide();
            $(document).off("click");
        });
    });
});

the html for that

<a href="javascript:void(0);" id="one">
    Div One
</a>
<div id="two">
    Div Two
</div>

And the css

#two {
    display: none;
    width: 100px;
    height: 100px;
    background-color: #AAA;
    position: absolute;
    top: 50px;
    left: 50px;
}

How can I select body outside an element using jquery

3 Answers3