Click Propagation failing in Jquery

Question

For part of the site I'm working on, I have a set of sidebars that can pull out. To have them hide when the users are done with them, I've set up a div with a click event (see below) so that whenever the user clicks somewhere outside of the sidebar, the sidebar closes. The problem that I'm running into, however, is that the click event handler is grabbing the event, running its method, and then the click event seems to stop. I've tried using return true and a few other things I've found around here and the internet, but the click event just seems to die.

$('.clickaway').click(function() {
        $('body').removeClass(drawerClasses.join(' '));
        return true;
    });

EDIT: Here is a fiddle with an example: https://jsfiddle.net/2g7zehtn/1/ The goal is to have the drawer out and still be able to click the button to change the color of the text.

can you put your entire code in jsfiddle? a working example? — Just code, Apr 07 '15 at 17:37
You can just bind the click to the `document` instead of adding another div. — Evan Davis, Apr 07 '15 at 17:47
`just seems to die` isn't a very good description of a problem — charlietfl, Apr 07 '15 at 17:47
@charlietfl Take your pick of the ways I try to describe what appears to be happenning. The click event dies/does not propagate to anything outside of the click to close section. — Michael Harrison, Apr 07 '15 at 17:54
@Mathletics The reason I'm not binding to document is because it was giving some wierd behavoir when I was trying to click on something inside of the drawer to activate an item (such as an a tag) inside of a drawer — Michael Harrison, Apr 07 '15 at 17:55
you have stop propagation from inside the drawer; there are dozens of SO questions covering that. — Evan Davis, Apr 07 '15 at 17:56
I'm getting everything into the jsFiddle here: https://jsfiddle.net/gb7qcjLn/ — Michael Harrison, Apr 07 '15 at 17:57
`the click event is grabbing the event` - sorry but an event can't grab an event. — Roamer-1888, Apr 07 '15 at 18:00
What else do you expect the "clickaway" click event to do (other than closing the sidebar)? — showdev, Apr 07 '15 at 18:07
I'm trying to bubble the event so that if the user clicks a button or link while the drawer is out, the clicked item still activates. — Michael Harrison, Apr 07 '15 at 18:11
Sorry, I had got interrupted and didn't get the section showing the problem done. See my edit — Michael Harrison, Apr 07 '15 at 18:20

score 0 · Answer 1 · edited May 23 '17 at 11:43

Using this somewhat famous SO answer as a guide, you can bind to the $(document).mouseup(); event and determine whether certain "toggling" conditions apply:

[EDIT] - Example updated to illustrate clicking a link outside of the containing div.

// Resource: https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it

var m = $('#menu');
var c = $('#menuContainer');
var i = $('#menuIcon');

i.click(function() {
  m.toggle("slow");
});

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

  console.log(e.target); // <-- see what the target is...

  if (!c.is(e.target) && c.has(e.target).length === 0) {
    m.hide("slow");
  }
  
});

#menuIcon {
  height: 15px;
  width: 15px;
  background-color: steelblue;
  cursor: pointer;
}
#menuContainer {
  height: 600px;
  width: 250px;
}
#menu {
  display: none;
  height: 600px;
  width: 250px;
  border: dashed 2px teal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" id="link">I'm a link outside of the container</a>

<div id="menuContainer">
  <div id="menuIcon"></div>
  <div id="menu"></div>
</div>

If they clicked on a button or a tag outside of the drawer, wouldn't e.target.length actually be greater than 0? The whole reason I'm trying to figure it out this way is so I can close the drawer and activate anything they clicked on at the same time. — Michael Harrison, Apr 07 '15 at 18:37
@MichaelHarrison - no it wouldn't. It's not `e.target.length` it's `$(myContainerElement).has(e.target).length`. In other words, it's using jQuery `has()` to determine if the mouse up event target is a descendant of the menu container... if it's not, it hides the menu. — wahwahwah, Apr 07 '15 at 18:46
@MichaelHarrison - I've updated the answer. If you open the console you can see what `e.target` is. — wahwahwah, Apr 07 '15 at 18:50

score 0 · Accepted Answer · answered Apr 07 '15 at 19:01

The issue is your .clickaway layer is sitting above everything that's interactive, such as your button. So clicking the button, you're actually clicking the layer.

One thing you could do is apply a higher stacking order for elements you want to interact with, above the .clickaway layer. For example, if we apply position: relative, like this:

.show-drawerHotkey .ColorButton {
    position: relative;
}

The element will now be in a higher stacking order (since it comes after the clickaway, and we've applied no z-index to clickaway)

Here's a fiddle that demonstrates: https://jsfiddle.net/2g7zehtn/5/

Click Propagation failing in Jquery

2 Answers2