How to create a click event that is only called when clicking outside a div?

Asked

Viewed 7,891 times

8

I need you to click off a div (is a registration screen), the same if close.

What selector should I use so that clicking anywhere outside the div that div closes?

$(????).on("click", function(){
    $('div').hide();  
});

If there is click on any part or element of div cannot close because the user will be completing the data.

javascript jquery html click

3 answers

11


You can associate the event in a more external element, for example the body, and inside the event check which is the target of the event.

If the target is the DIV you want to delete from the click event, then using a if do nothing in this case.

javascript

$(function() {
    var div = $("#div"); // seleciona a div específica
    $("body").on("click", function (e) {
        if (div.has(e.target).length || e.target == div[0])
            return;

        alert("Você clicou fora da div!");
    });
})

jsfiddle - excluding 1 event element

Excluding multiple event areas

Using Closest as indicated by @mgibsonbr it becomes even easier to extend the concept: for example, when you want to exclude multiple areas of the event:

jsfiddle - excluding various elements of the event

  • I would also have to check all the elements within the div. Or I’m wrong?

  • You will have to detect if the target is the div itself or if you own the div as an ancestor... I will create an example fiddle.

  • 3

    I believe that closest can help you there. Just use the desired div selector as an argument; if it returns more than zero results, it is because the element is inside the div.

  • 2

    @mgibsonbr: with closest is even more flexible... in my example I used has... but if it had to exclude multiple elements of the event, closest very helpful.

2

You can add the event click in the document shooting all over the page.

In a if within the click verify which the target of the clicked location, if the ID is equal to the one of the div return false, otherwise execute the hide.

There is a trick, needs to be checked if the element $(e.target) is the child of the element nay must have the click event triggered.

$(document).on("click", function (e) {
    var obj = 'item', id = $(e.target).attr('id');
    if (id==obj) return;
    if ($("#"+obj+" #"+id).length > 0) return;
    $("#"+obj).hide();
});

Look at the example in jsfiddle

  • It works for the problem in the question, but if I read the code correctly, if there is an event of click an element within the target element, that event will not fire.

  • it worked for me jsfiddle you have some example of how it would not work?

0

When we need to do something countless times, maybe it’s worth creating an extension on jQueryin order to solve this problem.

I did it this way:

(function ( $ ) {

    $.fn.clickOut = function (callback) {

        var that = this;

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

            if ( $(e.target).closest(that).size() > 0) {

                return;
            }

            $.isFunction(callback) && $.proxy(callback, that)(e);
        });
    }

})( jQuery )

So when I want a certain element to be closed only when you click outside, I do it this way:

$('.fecha_quando_clica_fora').clickOut(function()
{
    $(this).hide()
});

See this in the JSFIDDLE

  • Updating The question is from 2014. Currently you can use the pseudo class body:not('div')

Browser other questions tagged javascript jquery html click

You are not signed in. Login or sign up in order to post.