title: jQuery - handle child-click depending on parent class
body: <p>i have some trouble here using js/jquery:</p>
  
  <p>I have parent LIs with several different child elements in it. Now every child element has an own attached event-handler. What i need now is to call an event of the parent if it misses some class, and call the (clicked) child's event if the parent has that class:</p>
  
  <pre><code>&lt;div id="parent" class="expanded"&gt;
    &lt;span class="child1"&gt;&lt;/span&gt;
    &lt;div class="child2"&gt;&lt;/div&gt;
    &lt;font class="child3"&gt;&lt;/font&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now i only want to execute each child-events if the parent container misses the class "<em>expanded</em>". If the parent is "expanded" i need to allow the executed functions.</p>
  
  <p>Now sure it's easy to ask for that class in every single handler on the child elements, but i think there could be a much better solution using only one handler that decides and bubbles/stopBubble the event. Do you know any nice solution?</p>
  
  <h2>Found Solution:</h2>
  
  <p>Easy to say, the key is Capturing. Since jQuery does not support capturing (bubbling the other direction: From parent to child) i can use this <em>workaround</em>:</p>
  
  <p>Now it works adding this to the beginning of my code:</p>
  
  <pre><code>$('#parent').get(0).addEventListener('click', function(e) {
          if(!$(this).closest('li').hasClass('expanded')) {
              e.stopPropagation();
              e.preventDefault();
              e.stopImmediatePropagation();
              return getTicket(e, $(this)).toggleVisibility();
          }
      }, true);
  </code></pre>