14

Similar to this question, but taking it a step further. I would like to detect clicks outside of a set of items, which I am handling in the following way:

$('#menu div').live('click', function() {
    // Close other open menu items, if any.
    // Toggle the clicked menu item.

    $('body').one('click', function(event) {
        // Hide the menu item.
        event.stopPropagation();
    });
});

This works like a charm, unfortunately, when another menu item is open and a second is clicked, it requires two clicks to open the second item. The first click hides the first menu item that was open, the second shows the second menu item.

The "correct" behavior works in the following way:

  • Clicking a menu item opens it.
  • Clicking the same menu item (or it's children) closes it.
  • Clicking another menu item closes the first, opens the second.
  • Clicking away from (open) menu items closes them.

I have tried the following in place of the above $('body').one() order to ignore clicks on menu items with little success:

// Captures click on menu items in spite of the not.
$('*').not('#menu *').one('click', function() { // Hide menu }
$('*:not(#menu)').one('click', function() { // Hide menu }

As always, thanks for any help!

Community
  • 1
  • 1
chuckg
  • 9,195
  • 7
  • 28
  • 26

2 Answers2

30

Just move the body click handler outside and do something like this:

$('body').bind('click', function(e) {
    if($(e.target).closest('#menu').length == 0) {
        // click happened outside of menu, hide any visible menu items
    }
});

It was incorrectly pointed out in the comments that e.target does not work in IE; this is not true as jQuery's Event object fixes these inconsistencies where necessary (IE, Safari).

Paolo Bergantino
  • 480,997
  • 81
  • 517
  • 436
  • What's the purpose of moving the `body` click handler outside of the menu click handler? It appears to accomplish the same task (without the overhead of catching every body click if the menu is never opened) by applying it after a menu item is opened. Or am I missing something? – chuckg Jul 21 '09 at 18:48
  • It's a fair point; I consider the overhead of binding and unbinding an event whenever a user clicks on a menu item unnecessary. Usually there won't be much clicking on a page aside from going to another page, in which case the extra click handler is completely irrelevant. At the end of the day both are okay depending on your needs, so you can stick to the one handler if it fits your needs. – Paolo Bergantino Jul 21 '09 at 19:20
  • 2
    @Josh, e.target in the above code should use the jQuery event, not the IE-specific event. – Joe Chung Jul 21 '09 at 21:12
15

I wrote this a long time ago, before the glory days of jQuery...

function clickedOutsideElement(elemId) {
  var theElem = getEventTarget(window.event);
  while(theElem != null) {
    if(theElem.id == elemId)
      return false;
    theElem = theElem.offsetParent;
  }
  return true;
}

function getEventTarget(evt) {
  var targ = (evt.target) ? evt.target : evt.srcElement;
  if(targ != null) {
    if(targ.nodeType == 3)
      targ = targ.parentNode;
  }
  return targ;
}

document.onclick = function() {
  if(clickedOutsideElement('divTest'))
    alert('Outside the element!');
  else
    alert('Inside the element!');
}
Josh Stodola
  • 81,538
  • 47
  • 180
  • 227
  • jQuery fixes e.target to be cross browser, thus rendering all this hoopla unnecessary. :) – Paolo Bergantino Jul 21 '09 at 22:57
  • All this is moot if you only support IE9+, it's now fixed http://msdn.microsoft.com/en-us/library/ie/ff974946%28v=vs.85%29.aspx – Gabe Jun 23 '12 at 14:24