jQuery trigger event when click outside the element

Question

$(document).click(function(evt) {
    var target = evt.currentTarget;
    var inside = $(".menuWraper");
    if (target != inside) {
        alert("bleep");
    }

});

I am trying to figure out how to make it so that if a user clicks outside of a certain div (menuWraper), it triggers an event.. I realized I can just make every click fire an event, then check if the clicked currentTarget is same as the object selected from $(".menuWraper"). However, this doesn't work, currentTarget is HTML object(?) and $(".menuWraper") is Object object? I am very confused.

user113716 · Accepted Answer · 2010-07-23 01:50:49Z

77

Just have your menuWraper element call event.stopPropagation() so that its click event doesn't bubble up to the document.

Try it out: http://jsfiddle.net/Py7Mu/

$(document).click(function() {
    alert('clicked outside');
});

$(".menuWraper").click(function(event) {
    alert('clicked inside');
    event.stopPropagation();
});

http://api.jquery.com/event.stopPropagation/

Alternatively, you could return false; instead of using event.stopPropagation();

answered Jul 23, 2010 at 1:50

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexey Sukhikh · Accepted Answer · 2012-08-07 10:07:58Z

25

if you have child elements like dropdown menus

$('html').click(function(e) {
  //if clicked element is not your element and parents aren't your div
  if (e.target.id != 'your-div-id' && $(e.target).parents('#your-div-id').length == 0) {
    //do stuff
  }
});

answered Aug 7, 2012 at 10:07

Alexey Sukhikh

4385 silver badges8 bronze badges

1 Comment

GlennFriesen Over a year ago

This is literally the best answer. Concise and understandable. Great.

Nick Craver · Accepted Answer · 2010-07-23 01:50:29Z

11

The most common application here is closing on clicking the document but not when it came from within that element, for this you want to stop the bubbling, like this:

$(".menuWrapper").click(function(e) {
  e.stopPropagation(); //stops click event from reaching document
});
$(document).click(function() {
  $(".menuWrapper").hide(); //click came from somewhere else
});

All were doing here is preventing the click from bubbling up (via event.stopPrpagation()) when it came from within a .menuWrapper element. If this didn't happen, the click came from somewhere else, and will by default make it's way up to document, if it gets there, we hide those .menuWrapper elements.

answered Jul 23, 2010 at 1:50

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Comments

rob waminal · Accepted Answer · 2010-07-23 02:03:52Z

4

try these..

$(document).click(function(evt) {
    var target = evt.target.className;
    var inside = $(".menuWraper");
    //alert($(target).html());
    if ($.trim(target) != '') {
        if ($("." + target) != inside) {
            alert("bleep");
        }
    }
});

answered Jul 23, 2010 at 2:03

rob waminal

18.5k18 gold badges53 silver badges65 bronze badges

Comments

Jack Vo · Accepted Answer · 2017-10-17 02:44:44Z

3

$(document).click((e) => {
  if ($.contains($(".the-one-you-can-click-and-should-still-open").get(0), e.target)) {
  } else {
    this.onClose();
  }
});

answered Oct 17, 2017 at 2:44

Jack Vo

2892 silver badges10 bronze badges

1 Comment

oBo Over a year ago

I like this implementation

dev · Accepted Answer · 2014-03-25 00:36:47Z

2

I know that the question has been answered, but I hope my solution helps other people.

stopPropagation caused problems in my case, because I needed the click event for something else. Moreover, not every element should cause the div to be closed when clicked.

My solution:

$(document).click(function(e) {
    if (($(e.target).closest("#mydiv").attr("id") != "mydiv") &&
        $(e.target).closest("#div-exception").attr("id") != "div-exception") {
        alert("Clicked outside!");
    }
});

http://jsfiddle.net/NLDu3/

answered Mar 25, 2014 at 0:36

dev

4113 silver badges18 bronze badges

Comments

iWantSimpleLife · Accepted Answer · 2010-07-23 01:51:28Z

1

I do not think document fires the click event. Try using the body element to capture the click event. Might need to check on that...

answered Jul 23, 2010 at 1:51

iWantSimpleLife

1,96414 silver badges22 bronze badges

Comments

Baz Love · Accepted Answer · 2015-08-05 04:40:45Z

This code will open the menu in question, and will setup a click listener event. When triggered it will loop through the target id's parents until it finds the menu id. If it doesn't, it will hide the menu because the user has clicked outside the menu. I've tested it and it works.

function tog_alerts(){
   if($('#Element').css('display') == 'none'){
       $('#Element').show();
       setTimeout(function () {
           document.body.addEventListener('click', Close_Alerts, false);
       }, 500);
   }
}

function Close_Alerts(e){
   var current = e.target;
   var check = 0;
   while (current.parentNode){
      current = current.parentNode
      if(current.id == 'Element'){
         check = 1;
      }
   }
   if(check == 0){
      document.body.removeEventListener('click', Close_Alerts, false);
      $('#Element').hide();         
   }
}

ghazizadeh · Accepted Answer · 2018-01-14 04:36:29Z

1

function handler(event) {
 var target = $(event.target);
 if (!target.is("div.menuWraper")) {
  alert("outside");
 }
}
$("#myPage").click(handler);

answered Jan 14, 2018 at 4:36

ghazizadeh

111 bronze badge

Comments

Muhammad Usman · Accepted Answer · 2014-08-20 13:54:47Z

0

try this one

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

        if(event.target.id === 'xxx' )
            return false;
        else {
              // do some this here
        }

    });

answered Aug 20, 2014 at 13:54

Muhammad Usman

1,3625 gold badges19 silver badges35 bronze badges

1 Comment

Djizeus Over a year ago

Could you explain how/why this could be better than the already accepted answers?

Programer_saeed · Accepted Answer · 2018-11-10 21:13:38Z

    var visibleNotification = false;

  function open_notification() {
        if (visibleNotification == false) {
            $('.notification-panel').css('visibility', 'visible');
            visibleNotification = true;
        } else {
            $('.notification-panel').css('visibility', 'hidden');
            visibleNotification = false;
        }
    }

    $(document).click(function (evt) {
        var target = evt.target.className;
        if(target!="fa fa-bell-o bell-notification")
        {
            var inside = $(".fa fa-bell-o bell-notification");
            if ($.trim(target) != '') {
                if ($("." + target) != inside) {
                    if (visibleNotification == true) {
                        $('.notification-panel').css('visibility', 'hidden');
                        visibleNotification = false;
                    }
                }
            }
        }
    });

Collectives™ on Stack Overflow

jQuery trigger event when click outside the element

11 Answers 11

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related